Question

我有一个名为signup-box的div元素，我希望它的不透明度值为0.65，但这样做似乎有副作用。由于某种原因，它也适用于该div中的所有内容。例如，我的白色文字不会显示白色，输入也不是白色。如何保持透明效果而不会丢失我想要保留的设计方面？ http://jsfiddle.net/HKy3F/5/

Answer 1

这是opacity属性的行为（它适用于该元素中的所有）。如果您只想将不透明度应用于背景，那么您需要使用65％透明黑框创建图像，或者您可以使用CSS3颜色RGBA函数生成65％的黑色不透明度（不适用于IE＆lt; 9）。

background: rgba(0, 0, 0, 0.6);

Which produces this jdFiddle.希望这就是你要找的东西。

Answer 2

检查一下，这应该回答你的问题，在你的盒子上使用背景rgba而不是不透明度。

http://jsfiddle.net/camus/Xb5TU/

#signup-box {
    height: 330px;
    width: 350px;
    background-color: rgba(0,0,0,0.65);

    border-radius: 8px;
}

Answer 3

一种简单的方法是使用您需要的透明度创建一个小的png文件，并将其设置为父元素的背景。这对所有浏览器都有好处:)）

Answer 4

您是否尝试使用2个div - 一个用于背景，一个用于内容？

在我的例子中，我的背景色为#ffffff，不透明度为65％。

这是CSS：


    body { background:#000000 ;
    margin:auto ;
    padding:15px ;
    }

    #divA { background:#ffffff ; /* this is your background */
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";

    /* IE 5-7 */
    filter: alpha(opacity=65);

    /* Netscape */
    -moz-opacity: 0.65;

    /* Safari 1.x */
    -khtml-opacity: 0.65;

    /* Good browsers */
    opacity: 0.65; 

    display:block ;
    width:300px ;
    height:300px ;
    margin:auto ;
    z-index:1 ;
    }

    #divB { display:block ; /* this is where your content goes */
    padding:20px ;
    width:250px ;
    height:260px ;
    text-align:center ;
    color:#C00 ;
    font-family:Arial, Helvetica, sans-serif ;
    font-size:24px ;
    text-align:center ;
    margin:auto ;
    z-index:5000 ;
    }

这是实现它的HTML：


    ‹div id="divA"›
    ‹div id="divB"›text goes here‹/div›
    ‹/div›

适用于IE7，IE8，IE9，FF，Opera，Safari和Chrome

祝你好运！

辛西娅

将不透明度应用于CSS中的元素

4 个答案: