显示银条的渐变图像答案

【问题标题】：Gradient image showing a silver bar显示银条的渐变图像
【发布时间】：2014-06-03 20:32:58
【问题描述】：

我已经使用了带有渐变的图片作为背景图片@：http://lotcapture.burnseo.com/

图像具有 Photoshop 渐变效果并保存为 png。据我所知，这只发生在 Mac 上的 Chrome 中，但这让我很困扰，因为我无法弄清楚为什么渐变图像会在渐变所在的位置显示银条：

CSS：

.wide-slider {
position: relative;
width: 100%;
background-image: url('/images/sky-home.png');
padding-left: 100%;
margin-left: -100%;
background-repeat: repeat-x;
padding-right: 100%;
margin-right: -100%;
top: -80px;
border-top: solid 5px #E9E9E9;

任何反馈将不胜感激。谢谢。

【问题讨论】：

什么渐变？你没有渐变。
图像在 Photoshop 中使用渐变保存。它是在 Photoshop 中创建的，具有从黑色到透明的渐变，因此天空图像显示在顶部，然后在底部淡化。该图像在 Mac 上的 Chrome 中显示很奇怪。有什么原因吗？
图像是否应该“平铺”？如果没有，您可以尝试将 repeat-x 更改为 no-repeat。

标签： html css image google-chrome

【解决方案1】：

我认为您说的是 Photoshop 中的“图层蒙版”：

图像是在 Photoshop 中使用渐变保存的。它创建于 Photoshop 用从黑色到透明的渐变，所以天空图像显示在顶部，然后在底部消失。

我尝试只显示背景图片（链接是 this one），但我没有看到渐变为透明的渐变，所以问题出在您的图片中，而不是在浏览器的渲染中，也因为在 Firefox 和 Chrome for Windows 中，它以相同的方式出现。

【讨论】：