下面附上源码和图片下载地址
👉👉👉图片地址：火影忍者超酷系列壁纸放送1080P高清壁纸
（由于本地图片不显示，所以我换上了网址链接）
下面代码直接复制粘贴即可看效果。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标经过图片出现遮盖层</title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: "Microsoft YaHei";
}
ol, ul, li, {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
/*index.css*/
.bg {
background: #666;
position: absolute;
min-width: 100%;
min-height: 100%;
}
.title {
height: 150px;
font-size: 32px;
line-height: 150px;
color: #fff;
text-align: center;
}
.wrap {
width: 1150px;
margin: 0 auto;
}
.right-space {
margin-right: 10px;
}
.main-content {
width: 280px;
float: left;
margin-bottom: 10px;
}
.main-content .img-item {
width: 280px;
height: 180px;
}
.main-content img {
width: 280px;
height: 180px;
}
.main-content .description {
font-size: 18px;
color: #fff;
padding: 10px;
}
.main-content .description span {
color: #ff6869;
}
.footer h2 {
color: #fff;
}
.footer p {
font-size: 20px;
line-height: 20px;
color: #fff;
margin-bottom: 10px;
}
/*第一个*/
.main-content .img01 .cover {
display: none;
font-size: 18px;
line-height: 180px;
text-align: center;
color: #fff;
background: #999;
margin-top: -180px;
position: relative;
z-index: 1;
}
.main-content .img01:hover .cover {
display: block;
}
/*第二个*/
.main-content .img02 {
background: #fff;
}
.main-content .img02 img {
opacity:1.0;
filter:alpha(opacity=100); /*ie8 及更早版本不兼容 opacity 属性，所以使用 filter */
}
.main-content .img02:hover img {
opacity:0.8;
filter:alpha(opacity=80); /*ie8 及更早版本不兼容 opacity 属性，所以使用 filter */
}
/*第三个*/
.main-content .img03 .cover {
display: none;
font-size: 18px;
line-height: 180px;
text-align: center;
color: #fff;
background: #999;
opacity:0.8;
filter:alpha(opacity=80); /*ie8 及更早版本不兼容 opacity 属性，所以使用 filter */
margin-top: -180px;
position: relative;
z-index: 1;
}
.main-content .img03:hover .cover {
display: block;
}
/*第四个*/
.main-content .img04 .cover {
display: none;
font-size: 18px;
line-height: 180px;
text-align: center;
color: #fff;
background-color: rgba(153, 153, 153, 0.8); /*photoshop中查得 十六进制#999999 是 R:153; B:153; G:153。 0.8是透明度*/
margin-top: -180px;
position: relative;
z-index: 1;
}
.main-content .img04:hover .cover {
display: block;
}
</style>
</head>
<body>
<div class="bg">
<div class="title">
<p>四种图片遮盖层对比</p>
</div>
<div class="main wrap clearfix">
<div class="main-content right-space">
<a class="img-item img01" href="#" title="鼠标滑过出现遮盖层">
<img src="https://i0.hdslb.com/bfs/article/351aa100b257ff751b6e041eb7ff21268f14d321.png@1320w_742h.webp" />
<div class="cover">这是遮盖层</div>
</a>
<div class="description">
<p>原理：</p>
<p>①做一个和图片同级的空元素，设置成图片大小；</p>
<p>②<span>margin-top: -height;</span>来使遮盖层挪动到图片位置；</p>
<p>③再使用<span>diplay: none;</span>隐藏，<span>:hover</span>触发显示；</p>
<p>④这里注意加上<br /> <span>position: absolute/relative;</span><br /> <span>z-index: 1;</span><br />来设置该图层的堆叠次序，否则在图片下层，也就看不出效果。</p>
</div>
</div>
<div class="main-content right-space">
<a class="img-item img02" href="#" title="鼠标滑过出现遮盖层">
<img src="https://i0.hdslb.com/bfs/article/18e4cb60cb4b464e7b1ac36daf6ff65907f578fc.png@1320w_742h.webp" />
</a>
<div class="description">
<p>原理：</p>
<p>①使用CSS3的<span>opacity</span>透明属性；</p>
<p>②给图片默认透明度：100%；而给<span>:hover</span>伪类80%的透明度；</p>
<p>③当然，为了考虑到<span>ie8及早期版本不兼容opacity</span>，所以再设置个<span>filter</span>滤镜属性。</p>
<p>ps:因为我这里背景是暗灰色，所以我给图片加了个白色背景，这样透明起来就不会暗。</p>
<p style="color: blue;">注意：</p>
<p><span>opacity:</span> 的值为 <span style="color: yellow;">0~1.0</span>。</p>
<p><span>filter:</span> 的值为<br /><span>alpha(opacity=<span style="color: yellow;">0~100</span>);</span></p>
</div>
</div>
<div class="main-content right-space">
<a class="img-item img03" href="#" title="鼠标滑过出现遮盖层">
<img src="https://i0.hdslb.com/bfs/article/aaec5fa49f4cc343c1d995e60dfb87cd2832b903.png@1320w_742h.webp" />
<div class="cover">这是遮盖层</div>
</a>
<div class="description">
<p>原理：</p>
<p>①这是结合了第一种和第二种的产物；</p>
<p>②首先增加一个覆盖层，通过margin来使覆盖层和图叠位；</p>
<p>③然后给该覆盖层添加 opacity 透明度属性（:hover就不需要设置透明了）。</p>
</div>
</div>
<div class="main-content">
<a class="img-item img04" href="#" title="鼠标滑过出现遮盖层">
<img src="https://i0.hdslb.com/bfs/article/d232546eacce7091ceff17cfa18b31a584c7577e.png@1320w_742h.webp" />
<div class="cover">这是遮盖层</div>
</a>
<div class="description">
<p>原理：</p>
<p>①与第三种类似，也是先添加一个同级块，给它透明属性，再叠位隐藏掉，用<span>:hover</span>来使它显示出来；</p>
<p>②但是此处并不是用<span>opacity/filter</span>来设置透明，而是用<span>background-color</span>的<span style="color: yellow;">rgba</span>值来调透明。</p>
<p>ps: <span style="color: yellow;">rgba</span>的值可以通过在photoshop输入十六进制颜色值得到。</p>
<p><span style="color: pink;">background-color: rgba(a, b, c, d);</span></p>
<p>a, b, c 对应 R, G, B值；</p>
<p>d 则是透明度，值为<span style="color: yellow;">0~1</span>。</p>
</div>
</div>
</div>
<div class="footer wrap">
<h2>总结：</h2>
<br />
<p>①第一种因为无透明属性，所以可做图片替换效果，缺点很明显，无透明不美观。</p>
<p>②第二种是直接给图片透明度，但是并不能添加文字等内容和其他效果。</p>
<p>③第三种虽然可以达到遮盖层加内容的效果，但是因为<span>opacity/filter</span>是针对整个元素的透明，所以导致文字等内容都给透明掉了。</p>
<p>④第四种是最好也是常用的，因为透明掉的也就是该元素的背景，而其他内容则还是无透明。</p>
</div>
</div>
</body>
</html>
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
