html怎么把图片白雾遮罩,巧用CSS3 border实现图片遮罩效果代码

复制代码代码如下:

无标题文档

.trans {

-webkit-transition: 0.3s ease;

-moz-transition: 0.3s ease;

-ms-transition: 0.3s ease;

-o-transition: 0.3s ease;

transition: 0.3s ease;

}

.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;

}

其实现原理是利用个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;

}

就这么简单....