html - 边缘附近不透明度逐渐降低的框

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