目的：
给一些图片加上水印。
（学习视频推荐：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给图片添加水印的详细内容。