边缘附近褪色不透明的盒子

Question

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

我用过

.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，但它仍然与左边对齐。

Answer 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，因为我没有它:)）