css背景图做水印,css给图片添加水印的方法

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

css背景图做水印,css给图片添加水印的方法相关推荐

css 背景图比例缩放,css - CSS背景图片的缩放比例与
这是我在这里的第一个问题,因此,如果我的问题可能没有重点,请原谅. 在图片报道文学上,我有大约30张高分辨率图片,这些图片是通过CSS加载的,因为我认为与使用'img'标签相比,它可能具有速度优势. ...
html图片撑开盒子,css背景图撑开盒子高度
本文原地址需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*10 ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
android 背景图遮罩,通过css使用background-color为背景图添加遮罩效果
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...
HTML CSS 背景图居中属性background-position
HTML CSS背景图居中(无序列表) --背景重复:backgroung-repeat:--no-pepeat:不重复--repeat-x:水平水平方向平铺; --repeat-y:垂直方向平铺-- ...
css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: 1 2 3 4 5 6 7 8 9 10 <style> html,body{margin:0px;padding:0px;} #backgrou ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
CSS背景图和渐变色共存
CSS背景图和渐变色共存需求场景是在一个DOM元素上需要背景图和渐变色共存实现 background: url(https://img.alicdn.com/imgextra/i4/1881744 ...

css背景图做水印,css给图片添加水印的方法

css背景图做水印,css给图片添加水印的方法相关推荐

最新文章

热门文章