Question

我有以下HTML + CSS：

.item {
  position: relative;
  width: 400px;
  height: 400px;
  background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item .gradient {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}

<div class="item">
  <div class="gradient">
  </div>
</div>

它在浏览器中正确呈现。但是在移动设备上（see the attached screenshot），渐变上有一条粗线，我不知道为什么会这样。

这也是我的小提琴：https://jsfiddle.net/tcxka242/1/

首先我认为这也是垂直重复的，但检查员说我设定的规则：background: url(...) repeat-x center bottom;扩展为：

background-image: url("http://i.imgur.com/oSpOTeK.png");
background-position-x: 50%;
background-position-y: 100%;
background-size: initial;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;

这是在使用谷歌浏览器的Android手机上。

Answer 1

抱歉，我无法正确验证这一点，但我对你有所了解。

.item .gradient {
  width:100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  outline: 0;
  border: none;
  background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}

如您所见，我已将轮廓设置为0，边框设置为无。可能存在div或隐藏边框的轮廓。

Answer 2

指定border-top: 0px;和box-shadow: none;将适合您

.item .gradient {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  box-shadow: none;
  left: 0;
  background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
border-top: 0px;
}

Answer 3

我认为这是在DPI较高的屏幕上造成的。因此，我提供了一个仅限CSS的替代方案。

https://jsfiddle.net/tcxka242/6/

.item {
  position: relative;
  width: 400px;
  height: 400px;
  background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}

.item:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%);
}

在高dpi设备上将div与图像作为渐变问题

3 个答案: