css在背景上添加文字

CSS是一种用于网页设计和排版的标记语言，它可以实现很多在网页中需要的效果，其中就包括在背景上添加文字。

/* CSS代码示例 */body {
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    font-size: 24px;
    color: white;
}
body::before {
    content: "这是背景上的文字";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
    

以上是一个简单的 CSS 代码示例，它使用了伪元素 `::before` 在背景上显示文字。首先，我们设置了一个背景图片 `background.jpg`，并确保它不会重复显示，而且位于页面中心的上方。

然后，我们使用 `::before` 伪元素在页面上添加文字。`::before` 伪元素是将内容插入到被选元素前面的虚拟元素。我们使用 `content` 属性来添加文本，并设置了 `position: absolute` 让这段文字脱离文档流，`top` 和 `left` 属性让文字位于页面中心，`transform` 属性让文字垂直和水平居中，`text-align` 属性用于让文字水平居中，最后我们设置了 `width: 100%` 属性，让这个伪元素宽度和页面一样宽。

这样就可以在不影响原有页面布局的情况下，在背景上添加我们需要的文字。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！