прозрачность блоков
сразу к делу, если позволите... делаю прозрачность блока следующим образом
.o_div {
background:#FFFFFF;
color: #ffffff;
filter:alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ "
}
<div class="o_div">
<div>
бла бла бла
</div>
</div>
в чем собственно проблема... фон прозрачный, но и текст на нем собственно говоря тоже... каким образом оставить только прозрачность фона, а текст оставить четко видимым?
.o_div {
background:#FFFFFF;
color: #ffffff;
filter:alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ "
}
<div class="o_div">
<div>
бла бла бла
</div>
</div>
в чем собственно проблема... фон прозрачный, но и текст на нем собственно говоря тоже... каким образом оставить только прозрачность фона, а текст оставить четко видимым?
Можно поверх полупрозрачного блока разместить блок с прозрачным фоном и непрозрачным текстом:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Opacity test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: none;
background: url(http://www.codenet.ru/images/logo.gif);
}
div#wrapper {
position: relative;
width: 400px;
height: 300px;
margin: 20% auto;
border: solid 2px #000;
}
.o_div {
width: 100%;
height: 100%;
/* opacity */
background:#FFFFFF;
color: #ffffff;
filter:alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}
#content {
position: absolute;
top: 0;
left: 0;
color: #000;
font-size: 1.4em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="o_div">
</div>
<div id="content">
bla bla bla
<img src="http://forum.codenet.ru/images/rating/rating_5.gif" alt="r" />
</div>
</div>
</body>
</html>
<html>
<head>
<title>Opacity test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: none;
background: url(http://www.codenet.ru/images/logo.gif);
}
div#wrapper {
position: relative;
width: 400px;
height: 300px;
margin: 20% auto;
border: solid 2px #000;
}
.o_div {
width: 100%;
height: 100%;
/* opacity */
background:#FFFFFF;
color: #ffffff;
filter:alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}
#content {
position: absolute;
top: 0;
left: 0;
color: #000;
font-size: 1.4em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="o_div">
</div>
<div id="content">
bla bla bla
<img src="http://forum.codenet.ru/images/rating/rating_5.gif" alt="r" />
</div>
</div>
</body>
</html>
Никогда не сталкивался, а почему нельзя задать прозрачность еще и для текста? Т.е. фон полупрозрачный, а параграфы с текстом непрозрачные.
Цитата:
Можно поверх полупрозрачного блока разместить блок с прозрачным фоном и непрозрачным текстом:
При таком размещении, блок не будет меняться при увеличении контента. =(
Цитата: likeopera
Никогда не сталкивался, а почему нельзя задать прозрачность еще и для текста? Т.е. фон полупрозрачный, а параграфы с текстом непрозрачные.
Дело в том, что прозрачность задается только для блока целиком =(
Вообщем-то пока нашел решение такое.. для фона блока использовать полупрозрачный png. Но хотелось бы нормальными средствами CSS это все сделать.