css给图片添加水印

目的：

给一些图片加上水印。

（学习视频推荐：css视频教程）

图片和水印展示区域

<div class="watermark-image"></div>

样式

.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教程

以上就是css给图片添加水印的详细内容，更多内容请关注技术你好其它相关文章！