背景线性渐变在 Safari 中不起作用答案

【问题标题】：Background linear gradient not working in safari背景线性渐变在 Safari 中不起作用
【发布时间】：2016-07-20 20:11:05
【问题描述】：

我正在尝试在图像上设置线性渐变背景，而我的代码在 Chrome 中运行，但在 Safari 中却不行。这是我的代码的完整示例：

HTML：

<div>
  <img src="./assets/51a-front-img.png" draggable="false"/>
</div>

CSS：

div:after{
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  background: rgba(0,0,0,0.5);
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
}

img {
  position: relative;
  width: 100%;
}

【问题讨论】：

但是你看到你的开始和结束颜色是一样的？我在 OSX Yosemite 上的 Safari 8 中尝试了你的样式（调整了结束颜色），它可以工作。您在哪个浏览器版本中进行了测试？
请提供完整示例。您现在（在编辑后）在没有内容和大小的伪元素（：after）上使用背景属性，因此这不起作用。既不是在 Safari 中也不是在 chrome 中
我使用的是 Safari 9.0.1。我现在调整了结束颜色，也忘了提到它在伪元素之后（不确定是否重要）
我的 chrome 和 safari 都打开了，它可以在 Chrome 中运行，但不能在 safari 中运行，是的，很抱歉我没有在我的问题中添加内容和大小（现在更新）
在 el capita/safari 9.1 和 yosemite/safari 8 中测试了您的更新样式，并且在所有情况下都有效。一定是别的东西。除非您分享您的完整代码，否则我们无法前进

标签： css

【解决方案1】：

div:after 需要位于左边缘（chrome 默认情况下）。将您的 CSS 更改为：

div:after{
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: rgba(0,0,0,0.5);
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
}

img {
  position: relative;
  width: 100%;
}

【讨论】：