使用伪选择器 :after 在图像上创建叠加层 - 不采用全高

Question

试图在悬停时创建叠加效果，使用 ：after，但它没有占用整个高度。

如果我在以像素为单位的固定高度之后给出 a：，它将起作用。但我希望不要设置静态高度，以便它可以应用于各种尺寸的图像。

提前感谢！

* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
height: 100%;
width: 100%;
}
a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover:after {
opacity: 1;
}

<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>

Answer 1

我从a中删除了width: 100%;和height: 100%并添加了display: inline-block;默认情况下，a标签的显示值为inline忽略width并height值，因此它们以前没有做任何事情。display: inline-block;可能是您从一开始就想要的。

* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
display: inline-block;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover::after {
opacity: 1;
}

<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>

Answer 2

<a>标签默认显示为display: inline。

要获得所需的结果，您应该将<a>显示为inline-block。查看文档：https://www.w3schools.com/css/css_inline-block.asp

a {
position: relative;
display: inline-block;
}

* {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 500px;
}
a {
position: relative;
display: inline-block;
}
a:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}
a:hover:after {
opacity: 1;
}

<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>

Answer 3

您的<a>元素未获得完整高度，因为默认情况下显示为inline。

您可以设置display:inline-block; 以更改默认渲染行为...或者，您可以使用position属性。

将container设置为position:relative，将a和a:after设置为position:absolute，将允许您强制a:after调整为覆盖整个高度的top:0px;和bottom:0px;。

随着这种变化，一切都按预期工作。

检查一下。

.container {
width: 500px;
height: 500px;
position: relative;
}
a {
position: absolute;
}
a:after {
content: '';
position: absolute;
width: 100%;
top: 0;
bottom: 0px;
background: rgba(0,0,0,0.4);
transition: all .4s;
-webkit-transition: all .4s;
opacity:0.2;
}
a:hover:after {
opacity: 1;
}

<div class="container">
<a href="#">
<img src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547">
</a>
</div>

Answer 4

添加一个显示块：

a {
position: relative;
height: 100%;
width: 100%;
display:block;
}