css给图片添加水印

发布日期:2020年10月26日 19:31 星期一

  • 正文内容
  • 相关推荐

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);

}

 

趣乐分享-趣乐资源网
如有密码均为:www.itql.cn
学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:209993299  

作者资料
描述: 90后草根站长!不忘初心,方得始终!

本文标签:

文章标题:css给图片添加水印

文章链接:https://www.itql.cn/post-4343.html

版权声明:若无特殊注明,本文皆为《钱哆哆》原创,转载请保留文章出处。