Question

我正在使用RGBA创建一个覆盖在图像顶部的透明背景。工作得很好。我的问题是：有没有办法将盒子的边缘“软化”到更多地流入图片而不是硬边缘的位置。

这是我的框中的CSS：

#past{
    position:absolute;
    left:0;
    top:363px;
    background-color: rgba(34,34,34,0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    /* For IE 8*/
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    z-index:10;
    padding:10px;
}

我知道我可以通过在Photoshop中创建背景图像来实现这一目标，但我一直在寻找一种仅使用CSS的方式与使用图像。

此外，我希望尽可能在所有浏览器中都可以使用它。

感谢您的帮助。 =＆GT;

Answer 1

另一个选择是使用我个人喜欢的CSS工具之一：box-shadow。

框阴影实际上是节点上的阴影。它看起来像这样：

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);

参数是：

1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect.  0 means no blur.
color: The color of the shadow.

因此，您可以保留当前的设计，并添加如下的框阴影：

box-shadow: 0px -2px 2px rgba(34,34,34,0.6);

这应该会给你一个'模糊'的前沿。

本网站将提供更多信息：http://css-tricks.com/snippets/css/css-box-shadow/

Answer 2

这取决于您要寻找的衰落类型。

但是有阴影和圆角你可以得到一个不错的结果。圆角是因为阴影越大，除非你用圆角平衡它，否则它会在边缘看起来更奇怪。

http://jsfiddle.net/tLu7u/

也.. http://css3pie.com/

Answer 3

你可以使用CSS渐变 - 尽管浏览器不一致，所以你必须为每一个编码

就像那样：CSS3 Transparency + Gradient

渐变应该在顶部或右上角更加透明（取决于功能）

使用CSS的软边缘？

3 个答案: