复制代码 代码如下:
<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “/d/file/titlepic/xhtml1-transitional.dtd& />
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; chart心烦=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
.trans {
-webkit-transition: 0.3s ea;
-moz-transition: 0.3s ea;
-ms-transition: 0.3s ea;
-o-transition: 0.3s ea;
transition: 0.3s ea;
}
.test_outer {
display: block;
width: 200px;
height: 200px;
margin: 1em auto;
position: relative;
overflow: hidden;
}
.test_cover {
width: 40px;
height: 40px;
border: 200px培训学校如何招生 solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -115px;
top: -165px;
}
.test_cover:hover {
女人的香气片尾曲width: 140px;
height: 140px;
left: -170px;
top: -165px;
}
.test_cover:hover:after {
content: “秋思-一叶知秋！”;
text-align:center;
margin:55px 0 0 12px;
color: #fff;
font: bold 16px/1.2 ‘微软雅黑’;
text-shadow: 1px 1px rgba(0, 0, 0, .35);
position: absolute;
}
</style>
</head>
<body>
<a href=”#” class=”test_outer”>
<span class=”test_cover trans”></span>
<img src=”http://img.jb51.net/data/avatar/000/00/64/47_avatar_middle.jpg” width=”200″ height=”200″ />
</a>
</body>
&l我的音乐老师t;/html>
其实现原理是利用个border偌大的半透明边框属性（demo中边框宽度200像素），边框颜色为rgba黑色半透明，然后50%圆角。再用用定位把它覆盖在图片上面。
主要沈阳艺考核心代码:
复制代码 代码如下:
.test_cover {
width: 40px;
height: 40px;
border: 200px solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -115px;
top: -165px;
}
然后外面再用个父容器把它溢出隐藏掉就可以了
复制代码 代码如下:
.test_outer {
display: block;
width: 200px;
height: 200px;
margin: 1em auto;
position: relative;
overflow: hidden;
}
就这么简单….
本文发布于:2023-04-03 16:36:25，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/601926b215c997eb6dd741adfebc5b2c.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：巧用CSS3 border实现图片遮罩效果代码.doc
本文 PDF 下载地址：巧用CSS3 border实现图片遮罩效果代码.pdf
| 留言与评论（共有 0 条评论） |
