我有一个div的形象.我需要添加一个水印效果,或者基本上另一个图像,上面的图像的div.如何用css这样做?
示例代码:
<div id="image"> </div>
CSS:
#image { background:url(images/images.png) no-repeat; }
解决方法
至少有两种方法可以做到这一点,其中一种被@ erenon的答案所触动.
满足您的要求并使用图像:
<div id="image"> <img src="path/to/watermarking_image.png" alt="..." /> </div>
使用以下CSS:
#image { /* the image you want to 'watermark' */ height: 200px; /* or whatever,equal to the image you want 'watermarked' */ width: 200px; /* as above */ background-image: url(path/to/image/to/be/watermarked.png); background-position: 0 0; background-repeat: no-repeat; position: relative; } #image img { /* the actual 'watermark' */ position: absolute; top: 0; /* or whatever */ left: 0; /* or whatever,position according to taste */ opacity: 0.5; /* Firefox,Chrome,Safari,Opera,IE >= 9 (preview) */ filter:alpha(opacity=50); /* for <= IE 8 */ }
这应该产生如下所示:
+--------------+--------------+ | | | | 'watermark' | | | | __ | +--------------+ / \ | | ( ) | | /\ \ / | | / \ || | <-- Picture. Of...something. O_o | /\ / \ || | |/ \________/ \_()||_()(| +-----------------------------+
另一种方式,假设你所有的“水印”都是“一个字”,就是使用单词:
<div id="image"> <p>Watermark text</p> </div>
和以下CSS:
#image { /* the image you want to 'watermark' */ height: 200px; /* or whatever,equal to the image you want 'watermarked' */ width: 200px; /* as above */ background-image: url(path/to/image/to/be/watermarked.png); background-position: 0 0; background-repeat: no-repeat; position: relative; } #image p { /* the actual 'watermark' */ position: absolute; top: 0; /* or whatever */ left: 0; /* or whatever,IE >= 9 (preview) */ filter:alpha(opacity=50); /* for <= IE 8 */ }
这应该产生如下所示:
+--------------+--------------+ | | | | watermark | | | text | __ | +--------------+ / \ | | ( ) | | /\ \ / | | / \ || | <-- Picture. Of...something. O_o | /\ / \ || | |/ \________/ \_()||_()(| +-----------------------------+
我意识到这个问题可能是您的满意答案,但我希望这对您有用,即使只是一般信息.
原文地址:https://www.jb51.cc/css/216554.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。