Question

我对CSS的不透明度有些怀疑。我有一个使用不透明度的页眉和页脚，但我想关闭不透明度文本中的不透明度。这可能吗？

为了更好地理解，我将发布代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
    #printhead {display:none;}

    html {
        height:100%; 
        max-height:100%; 
        padding:0; 
        margin:0; 
        border:0; 
        background:#fff; 
        font-size:80%; 
        font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
        /* hide overflow:hidden from IE5/Mac */ 
        /* \*/ 
        overflow: hidden; 
        /* */ 
    }

    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

    #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}

    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:1; background-color:transparent; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000;}

    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:30px; background-color:transparent; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}

    .pad1 {display:block; width:18px; height:18px; float:left;} /* Com este "height", alinho a border do header */
    .pad2 {display:block; height:100px;}
    .pad3 {display:block; height:0px;} /* Com este "height" controlo onde começa o content e o scroll do browser */
    #content p {padding:5px;}
    .bold {font-size:1.2em; font-weight:bold;}
    .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
    h2 {margin-left:5px;}
    h3 {margin-left:5px;}


    /* Esta classe controla as caracteristicas do background do footer e do header. */
    .bkg 
    {
     background-color: blue;
     filter:alpha(opacity=35); /* IE's opacity*/
     opacity: 0.35;
     height: 10;
    }

    iframe
    {
    border-style: none;
    width: 100%; 
    height: 100%;
    }
</style>

</head>
<body>
<div id="head">
    <div class="bkg">
        <div class="pad1"></div>Header   
    </div>
</div>
<div id="content">

        <div class="pad3"></div>
            <iframe src="http://www.yahoo.com" id="iFrame"></iframe>
        <div class="pad2"></div>
    </div>
</div>
<div id="foot"><div class="bkg">Footer</div></div>
</body>
</html>

我想在页脚和标题中保持蓝色的不透明度，但我想把文字放得更强。这可能吗？

最诚挚的问候，

Answer 1

不透明度属性会影响当前元素及其所有子元素。您的案例的解决方案是背景上的RGBA / HSLA颜色（CSS3）。

关注一些链接：

Answer 2

opacity适用于整个元素及其后代。对于特定元素仅的透明背景，请使用rgba()颜色表示法，并将第四个值设置为0到1之间的值，或使用透明的PNG图像。

Answer 3

此链接肯定对您有用http://css.flepstudio.org/en/css3/opacity-transparency.html

Answer 4

我不认为一旦它被带走就可以添加不透明度。您定义的任何不透明度都将相对于当前的不透明度。要使文本不透明，您需要在.bkg元素之外定义它们，然后将它们放在它上面。

您可以在http://jsfiddle.net/pp3Cn/

看到这种方法

CSS中的不透明度有些疑点

4 个答案: