css给图片添加水印的方法

发布时间：2020-10-27 09:55:46

来源：亿速云

阅读：103

作者：小新

这篇文章将为大家详细讲解有关css给图片添加水印的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

目的：

给一些图片加上水印。

图片和水印展示区域

样式.watermark-image {

position: relative;

width: 300px;

height: 300px;

background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489746806388&di=68436cfc9319b2f3afeffa9a984a2dc2&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201605%2F19%2F20160519224441_VfMWR.thumb.700_0.jpeg') no-repeat;

background-size: 300px;

border: 1px dotted #f00;

}

.watermark-image:before {

content: "Message here.";

font-size: 21pt;

position: absolute;

top: 50%;

left: 50%;

margin-left: -80px;

background-color: rgba(255, 255, 0, 0.7);

-webkit-transform:rotate(-45deg);

}

关于css给图片添加水印的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。