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))
        );

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