css 如何给图片打水印
导读：在前端开发中，水印是一种常见的处理图片的方式。在保护图片版权的同时，也可以为图片增添一份艺术特色。而CSS可以实现给图片打水印的效果。首先，需要为图片添加一个外层的容器，然后给容器设置一个背景图片，这个背景图片就是水印图片。具体的代码如下：...
在前端开发中，水印是一种常见的处理图片的方式。在保护图片版权的同时，也可以为图片增添一份艺术特色。而CSS可以实现给图片打水印的效果。首先，需要为图片添加一个外层的容器，然后给容器设置一个背景图片，这个背景图片就是水印图片。具体的代码如下：
style>
.watermark {
width: 400px;
height: 300px;
position: relative;
background-image: url('watermark.png');
background-position: center center;
background-repeat: no-repeat;
}
.watermark img {
display: block;
width: 100%;
height: 100%;
}
/style>
div class="watermark">
img src="image.jpg" alt="">
/div>
上述代码中，给容器.watermark设置了宽度和高度，并将position属性设置为relative，这是为了让.watermark内部的图片能够基于容器进行定位。同时，我们还给容器设置了一个背景图片，这个背景图片就是水印图片。这里的背景图片是可以更换的，可以使用自己的水印图片。
在容器.watermark内部，我们通过img标签插入了一张图片。由于我们需要将水印添加在图片的上层，因此图片需要设置为display:block，同时让它的高度和宽度都设置为100%。
接下来，我们需要使用伪元素before将水印图片覆盖在原图片之上。代码如下：
.watermark:before {
content: "";
display: block;
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url('watermark.png');
opacity: 0.5;
}
在.watermark的样式中，我们新增了一个before伪元素，并将其position属性设置为absolute，使其脱离文档流。通过设置top、left属性以及translate属性，我们将伪元素定位到图片的中心位置。同时，我们又一次将背景图片设置为水印图片，并通过opacity属性将其透明度设置为0.5，形成浅色的水印效果。
最终，我们就可以实现给图片打水印的效果。如果有多张图片需要打水印，只需要复制.watermark的HTML和CSS代码即可。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css 如何给图片打水印
本文地址： https://pptw.com/jishu/542153.html