css 给背景加水印文字

CSS样式可以让我们给网页的背景添加上很多有趣的效果。其中，在背景上添加水印文字也是一种常见的效果。下面我们就来看看如何使用CSS将水印文字添加到背景中。

    body {
            background: url('http://example.com/bg.jpg') no-repeat center center fixed;
    }
    body:before {
            content: "这里是水印文字";
            font-size: 70px;
            font-weight: 700;
            color: rgba(255, 255, 255, .1);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
    }
    

在上面的代码中，我们使用了body:before伪元素去添加水印文字。首先我们需要使用background属性将背景图片设置好。然后再在body:before中添加文字的样式，其中content属性表示要添加的文字内容。接着设置文字样式，包括颜色、大小和位置等。最后将水印文字所在的伪元素定位到屏幕中心，使其能够覆盖整个页面，这里我们使用了z-index属性将文字置于背景图片之后。

CSS样式的进化让我们可以更灵活地添加和控制网页的内容和效果。使用CSS添加背景水印文字，不仅可以让网页更加美观，而且也能够轻松展现网站或个人品牌的特色。

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