使用背景图像的图像上的梯度比它上面的图像高

Question

使用HTML

<div class="outer">
  <div class="bgimagegradient"></div>
  <img src="foo.jpg">
<div>

.backgroundimage {
    position: absolute;
    right: 25px; 
    z-index: -100;
    height: 400px;

    .bgimagegradient {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1;
        background-image: linear-gradient(to right, white 10%, rgba(0, 53, 107, .5));
    }
    > img {
        position: relative;
        right: 0px;
        top: 0px;
        z-index: 0;
    }
}

我得到以下行为（渐变太高）：

错误位于图像的底部，渐变比其结束的图像高约4px。

当图像在响应式上下文中足够大以达到容器最大宽度时（在我显示的HTML之外），它可以工作，但缩小到较小的响应方案，我遇到了这个问题。 / p>

Answer 1

你有一些不正确的事情：

• 您的HTML使用“外部”类，而您的CSS使用“backgroundimage”。
• 在渐变的CSS中，您指的是100％的宽度。但是，没有为父级定义宽度。
• 不需要使用z-index。

下面我创建了我认为你需要的东西。希望这会有所帮助。

.outer {
    position: relative;
    height: 400px;
    width: 400px;
}
.bgimagegradient  {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, white 10%, rgba(0, 53, 107, .5));
 }

<div class="outer">
  <img src="http://via.placeholder.com/400x400">
  <div class="bgimagegradient "></div>
<div>