css给图片添加水印

释放双眼,带上耳机,听听看~!

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给图片添加水印

人已赞赏
杂七杂八

PHP如何删除最后一个字符?

2020-10-26 19:10:04

杂七杂八

phpcms v9网站搬家更换域名的方法

2020-10-28 23:23:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索