Непрозрачность в CSS, некоторые сомнения - PullRequest
Новая
       5

Непрозрачность в CSS, некоторые сомнения

1 голос
/ 30 декабря 2010

У меня есть некоторые сомнения по поводу непрозрачности в 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>

Я хочу сохранить непрозрачность синего цвета в нижнем колонтитуле и заголовке, но я хотел бы поставитьтекст сильнее.Это возможно?

С наилучшими пожеланиями,

Ответы [ 4 ]

3 голосов
/ 30 декабря 2010

opacity применяется ко всему элементу и его потомкам.Для прозрачного фона на этом конкретном элементе только используйте цветовую запись rgba() и установите четвертое значение в диапазоне от 0 до 1 или используйте прозрачное изображение PNG.

3 голосов
/ 30 декабря 2010

Свойство opacity влияет на текущий элемент и все его дочерние элементы. Решением для вашего случая являются цвета RGBA / HSLA (CSS3) на фоне.

Перейдите по некоторым ссылкам:

2 голосов
/ 07 сентября 2011

Наверняка эта ссылка будет вам полезна http://css.flepstudio.org/en/css3/opacity-transparency.html

0 голосов
/ 30 декабря 2010

Я не думаю, что вы можете добавить непрозрачность, как только она будет убрана. Любая непрозрачность, которую вы определяете, будет относительно текущей непрозрачности. Чтобы сделать текст непрозрачным, вам нужно определить его вне элемента .bkg, а затем расположить поверх него.

Вы можете увидеть этот подход в действии на http://jsfiddle.net/pp3Cn/

...