css 怎么添加水印

CSS是层叠样式表的缩写，用于美化HTML网页。添加水印是一种常见的美化效果，可以用CSS快速地实现。

css 怎么添加水印

要添加水印，我们可以通过CSS的背景图片属性来完成。例如，我们可以使用白色的文字作为水印，并将其以灰色透明的方式显示在网页的背景上。

body {
  background-image: url("http://example.com/background.jpg");   /* 背景图 */
  background-repeat: no-repeat;                                  /* 不重复 */
  background-size: cover;                                        /* 全部铺满 */
}

.watermark {
  color: #fff;                 /* 白色文字 */
  font-size: 60px;             /* 文字大小 */
  opacity: 0.5;                /* 透明度 */
  position: fixed;             /* 固定定位 */
  top: 50%;                    /* 顶部距离为50% */
  left: 50%;                   /* 左侧距离为50% */
  transform: translate(-50%,-50%); /* 居中对齐 */
}

<div class="watermark">Hello World</div>   /* 水印的HTML代码 */

在这段代码中，我们首先指定了一个背景图片，并设置了其不重复地覆盖整个网页。接下来，我们创建一个水印的样式类.watermark，其中包含了偏白色的文本、透明度、固定定位以及居中对齐等属性。最后，我们在网页中插入了一个包含文本的div元素，并将其设置为水印的HTML代码。

通过以上的CSS的设置，我们就可以很轻松地将文字作为背景水印添加到网页中，美化网站的外观效果，为用户带来更优美的浏览体验。

相关推荐