时间戳

首页 > 解决方案 > 使用伪选择器 :after 在图像上创建叠加层——不占用整个高度

css - 使用伪选择器 :after 在图像上创建叠加层——不占用整个高度

问题描述

尝试使用 :after 在悬停时创建叠加效果，但它没有占据全部高度。

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

提前致谢！

* {
  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>

标签： css

解决方案

我删除width: 100%;和添加默认情况下height: 100%，标签有一个显示值，其中忽略和值，所以他们之前没有做任何事情。可能是您从一开始就想使用的。adisplay: inline-block;ainlinewidthheightdisplay: 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>

推荐阅读