[分享]css中 图片加文字水印

CSS中的图片加文字水印是一种常见的设计技巧，可以使得图片更加美观和有特色。本文将教大家如何在CSS中来实现图片加文字水印。首先，我们需要一个图片和一个水印文本。这里我们使用下面的代码和图片： wa...

CSS中的图片加文字水印是一种常见的设计技巧，可以使得图片更加美观和有特色。本文将教大家如何在CSS中来实现图片加文字水印。

首先，我们需要一个图片和一个水印文本。这里我们使用下面的代码和图片：

 <img src="image.jpg" alt="image">
    <p>watermark</p> 

我们需要让水印文字覆盖在图片上，并且透明度较低，使得看起来更加自然。可以通过对水印文本的样式来实现。下面是实现代码：

 img {
        position: relative;
        display: block;
    }
    
    p {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        font-size: 2em;
        color: #fff;
        z-index: 1;
        transform: translate(-50%, -50%);
        opacity: 0.3;
    } 

上面的CSS样式中，我们首先将图片设置为相对定位，并且块级显示。然后将水印文本设置为绝对定位，并且使用了一些属性来使得它居中并且位置在图片的中心。同时，我们还设置了文字的大小、颜色、透明度和层级等等。最后，我们使用了transform属性来实现文本位置的调整。

通过上述CSS样式，我们就可以实现图片加文字水印的效果了。