css3 div背景水印文字

CSS3是一种用于设计网站和网页的样式表语言，其中有许多功能让你可以创建出非常精美的网站。其中之一是在div背景中添加水印文字的功能。

下面我们将使用CSS3的background属性来演示如何添加水印文字：

  div{
    background-image:url('watermark.png');
    opacity:0.5;
    background-repeat:no-repeat;
    background-position:center;
  }

上面的代码使我们将背景图片设置为水印图片，并添加了一个不透明的属性。background-repeat属性防止水印图片重复出现，而background-position属性将水印图像放在居中位置。

然后，我们将添加一些CSS3属性来设置水印文字：

  div:after{
    content:"Your watermark text here";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:24px;
    font-weight:bold;
    text-shadow:1px 1px 5px rgba(0,0.5);
  }

上面的代码使用添加CSS3的:after伪类来向div元素添加水印文字。然后，我们使用position和transform属性将水印文字移到div元素的中心。color属性用于设置文字颜色，而font-size和font-weight属性用于设置文字字体和字重。最后，我们使用text-shadow属性添加了一个阴影，以增加水印文字的可读性。

现在，我们已经成功地添加了CSS3的div背景水印文字。这是一个非常简单但是非常实用的功能，可以让你在网站或网页上添加一些很酷的效果。