Fatal编程技术网
  • css/
  • CSS3线性梯度+；rgba，不太真实的透明度

CSS3线性梯度+；rgba，不太真实的透明度

css

CSS3线性梯度+；rgba，不太真实的透明度,css,transparency,gradient,linear-gradients,Css,Transparency,Gradient,Linear Gradients,我的页面设置与此类似： <body> <div id="wrapper"> <!--- ... content ... --> </div> </body> 主体有一个背景色和一个平铺图像，可以在背景中添加一些噪波和纹理。最重要的是，#wrapper有一个线性渐变作为背景，从rgba（0,0,0,3）到rgba（0,0,0,0），渐变在页面顶部的div顶部扩展超过24个像素，以添加阴影 我的问题是，

我的页面设置与此类似：

<body>
    <div id="wrapper">
        <!--- ... content ... -->
    </div>
</body>
主体有一个背景色和一个平铺图像，可以在背景中添加一些噪波和纹理。最重要的是，#wrapper有一个线性渐变作为背景，从rgba（0,0,0,3）到rgba（0,0,0,0），渐变在页面顶部的div顶部扩展超过24个像素，以添加阴影

我的问题是，24像素渐变完成后#wrapper的背景颜色不是真正的透明度，即使渐变的结束颜色的alpha值为零。这给我留下的是一个不真实的透明背景，在包装器停止的地方，在身体背景上留下一条可见的“分割线”

如何使渐变变为完全透明？我猜alpha值为零就可以做到这一点。同样，使用
透明的
关键字也不能解决这个问题

更新

我添加了一些图片来显示问题。第一张图片是真实的外观，第二张图片显示了线条的位置，因为它在那里，尽管第一张图片上很不清楚




正如你所看到的，渐变并没有达到真正的透明度。当to颜色指定为
rgba（0,0,0,0）
或
透明时，则不适用


--Chris Buchholz
您是在webkit浏览器（chrome/safari）、firefox、IE还是Opera中测试它？因为它们对渐变的处理方式都不同


我不完全理解，虽然我认为你应该考虑使用CSS梯度发生器在线，他们大多使用纯色，只是用新的RGBA（）替换十六进制小数。
这是了解你是如何犯错的最好方法

除此之外，如果您在包装器div上定义了不透明度，那么这可能就是问题所在


这是我能做的最好的了
我也有同样的问题。。。我意识到这是因为我把图像保存为JPG。你需要一些支持透明度的东西
 您没有提供CSS代码。这将有助于更好地发现问题。但其中一个可能的问题可能是CSS属性的堆叠


#wrapper {
  background: rgb(174,188,191);
  background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
}




您使用另一个背景属性覆盖了第一个属性，可能是CSS中具有更高优先级的某个位置，导致您的透明度被覆盖：


您能给我们看一下您的包装器css代码吗？这可能看起来很明显，但你是否在包装器中添加了一个方框阴影？上传一个正在发生的事情的屏幕截图也很方便。还有什么浏览器/设备？如果你为你的渐变提供CSS代码，呈现发生的事情，以及模拟你想要发生的事情，那会很有帮助。你为什么不添加一个框阴影呢？听起来这正是你真正想要的。我正在Safari、Google Chrome和Firefox中进行测试。问题是一样的。我需要在页面顶部有一个从黑色到透明的阴影。页面主体有一个背景图像，所以我需要渐变（阴影）变得透明，而不仅仅是以颜色结束。当使用透明
或RGBA时，我无法获得真正的透明度。我在帖子中添加了图片，以显示问题。

#wrapper {
  background: rgb(174,188,191);
  background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
  background: #111; /*Overrides the above properties*/
}