边缘附近不透明的盒子答案

【问题标题】：Box with fading opacity near edge边缘附近不透明的盒子
【发布时间】：2013-05-06 23:48:10
【问题描述】：

我需要一个不透明度在盒子边缘附近较低的盒子（参考图像，红色标记的盒子，盒子的不透明度从右到左变低）

我用过

.waterMark
{
background-color: #FFFFFF;    
float: right;    
opacity: 0.6;
position: absolute;
width: 80%;
z-index: 999;
}

<div class="waterMark">

<p>SOME NAME</p>

</div>

我使用了float :right，但它仍然是左对齐的。

【问题讨论】：

使用 CSS3 透明度渐变，如this Stackoverflow answer中所述
您也可以使用透明的 .png 来做到这一点，它比 CSS 渐变更可靠地跨浏览器。
@esseks 它不适用于 Firefox。
正如 ralph.m 所说，使用绘制的 PNG 与地球上几乎所有的浏览器都兼容，请参阅 this matrix 进行比较。优化PNG并适当缓存资源，否则会消耗带宽。
我会检查的，感谢您的宝贵回复。

标签： html css

【解决方案1】：

您需要同时使用 CSS3 透明度和渐变功能。

类似下面的css：

.gradient{
        background-image: -webkit-gradient(
          linear, center center, left center, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

看到这个fiddle（它包括对所有浏览器的支持。我不确定IE，因为我没有它:)）

【讨论】：

您也可以使用this tool轻松生成CSS渐变。
@Drewman ，这是我见过的 css 构建的惊人之处。
@Sunil Lohar 不要试图在任何地方放置渐变 :)