下面附上源码和图片下载地址
👉👉👉图片地址:火影忍者超酷系列壁纸放送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>