CSS中的图片加文字水印是一种常见的设计技巧,可以使得图片更加美观和有特色。本文将教大家如何在CSS中来实现图片加文字水印。首先,我们需要一个图片和一个水印文本。这里我们使用下面的代码和图片: &am
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样式,我们就可以实现图片加文字水印的效果了。
粉丝
0
关注
0
收藏
0