Question

我在向linear-gradient的父img添加div样式时遇到问题。通过将图像加载为div的背景图像而不是img，我已经完成了我想要的工作，但这需要更多样式来呈现相同的内容。不确定我是否遗漏了什么。

这是我的标记：

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=Carousel%20Image&w=826&h=620" /></div>
</div>

萨斯：

#owl-demo {
  .owl-item {
    background-image: linear-gradient(to bottom, transparent 50%, #191919 100%);
  }
}

工作示例：http://codepen.io/ourcore/pen/vygGeP

Answer 1

将img设置为z-index: -1;，它应该有效（不要忘记添加position: relative;）。

像这样：

.owl-carousel .owl-item img {
    position: relative;
    z-index: -1;
}

Codepen

无法在img上添加线性渐变

1 个答案: