Question

我正在尝试使用css在图像顶部放置一个图层。但由于某些原因，img类没有起到作用。

Html -

<div class="slider">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>

演示 - https://jsfiddle.net/squidraj/b49a6xkd/

非常感谢任何帮助。

Answer 1

您将背景颜色应用于img元素，以便背景显示在img元素后面。使用伪元素来覆盖图像，并将背景颜色应用于伪元素。

＆＃13;

.slider {
  margin: 0 auto;
  text-align: center;
}
.slider .wrap {
  position: relative;
  display: inline-block;
}
.slider .wrap:after {
  background: rgba(255, 255, 255, 0.5);
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

＆＃13;

<div class="slider">
  <div class="wrap">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  </div>
</div>

＆＃13;

Answer 2

这可以通过使用psuedo elements来完成。您实际上是在页面中添加容器，并设置的background-color 。

The fiddle

CSS

.slider:before {
  content:'';
  position:absolute;
  display:block;
  width:100%;;
  height:400px;
  background-color:rgba(255,255,255,.5);
  z-index:1;
}

Answer 3

我为你提供了一个jsfiddle： https://jsfiddle.net/anp8wgqt/

如上所述，您需要在图像上方放置一些元素以显示叠加层。我在这里使用了一个伪元素，所以你已经有了相同的标记。

＆＃13;

.slider {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.slider img {
  width: 100%;
  height: auto;
  display: block;
}

.slider::after{
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 350ms;
}

.slider:hover::after {
  opacity: 1;
}

＆＃13;

<div class="slider">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>

＆＃13;

使用css覆盖图像

3 个答案: