返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: div+css >

css设置镶边和水印效果

2019-11-18 文章标签: css特效 浏览次数:

css设置设计镶边效果图片墙,我们看到一些表白的页面看的比较多,今天介绍一下图片墙的效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计镶边效果图片墙</title>
<STYLE type="text/css">
body { background: #F0EADA; }
img {
    background: white;
    padding: 5px 5px 9px 5px;
    background: white url(//www.freemuban.com/book/shad_bottom.gif) repeat-x bottom left;
    border-left: 2px solid #dcd7c8;
    border-right: 2px solid #dcd7c8;
}
</STYLE>
</head>
<body>
<img src="//www.freemuban.com/book/bg1118102601.jpg"  width="300">
<img src="//www.freemuban.com/book/bg1118102602.jpg"  width="400">
</body>
</html>

css设置设计水印效果,有的水印是通过程序实现,有的是通过css实现,本文介绍一下css实现,常见的也有在图片下房添加广告效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css设置水印效果</title>
<STYLE type="text/css" media="all">
body { background: #F0EADA; }
.watermark {
    position: relative;
    float: left;
    display: inline;
}
.img {
    background: white;
    padding: 5px 5px 9px 5px;
    background: white url(//www.freemuban.com/book/shad_bottom.gif) repeat-x bottom left;
    border-left: 2px solid #dcd7c8;
    border-right: 2px solid #dcd7c8;
}
.logo {
    filter: alpha(opacity=40);       /* IE */
    -moz-opacity: 0.4;               /* Moz + FF */
    opacity: 0.4;                   /* 支持CSS3的浏览器(FF 1.5也支持)*/
    position: absolute;
    right: 20px;
    bottom: 20px;
}
</STYLE>
</head>
<body>
<div class="watermark"><img src="//www.freemuban.com/book/bg1118102601.jpg" class="img" width="400"> <img src="//www.freemuban.com/book/bg1118102603.png" class="logo" width="100"> 
</div>
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。