Html 使用html和css创建水印
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21458162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating watermark using html and css
提问by demonoid
What I need is to create cross website transparent watermark like this using only html and css. Have no idea how to keep that always in one place for ex: right bottom side of browser window.
我需要的是仅使用 html 和 css 创建这样的跨网站透明水印。不知道如何将其始终保存在一个地方,例如:浏览器窗口的右下侧。
Thanks in advance
提前致谢
回答by ElendilTheTall
回答by Arunkumar Srisailapathi
To make it fixed: Try this way,
修复它:试试这个方法,
jsFiddleLink: http://jsfiddle.net/PERtY/
jsFiddleLink:http: //jsfiddle.net/PERtY/
<div class="body">This is a sample body This is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample bodyThis is a sample bodyThis is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample body
v
This is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample body
This is a sample body
<div class="watermark">
Sample Watermark
</div>
This is a sample body
This is a sample bodyThis is a sample bodyThis is a sample body
</div>
.watermark {
opacity: 0.5;
color: BLACK;
position: fixed;
top: auto;
left: 80%;
}
To use absolute:
要使用绝对:
.watermark {
opacity: 0.5;
color: BLACK;
position: absolute;
bottom: 0;
right: 0;
}
jsFiddle: http://jsfiddle.net/6YSXC/
jsFiddle:http: //jsfiddle.net/6YSXC/
回答by Green Wizard
回答by user2804021
Possibly this can be of great help for you.
也许这对你有很大帮助。
div.image
{
width:500px;
height:250px;
border:2px solid;
border-color:#CD853F;
}
div.box
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid;
border-color:#CD853F;
opacity:0.6;
filter:alpha(opacity=60);
}
div.box p
{
margin:30px 40px;
font-weight:bold;
color:#CD853F;
}
Check this linkonce.
检查此链接一次。