Прозрачность элемента.

Sedacove · September 29, 2011

Есть такое прекрасное свойство в css называется «opacity» и оно задает прозрачность элемента. Но есть одна проблема. У меня есть блок <div> я ему задаю прозрачность и весь текст тоже становится прозрачным. А мне нужно, чтобы только бэкграунд стал прозрачным, а текст нет. Как такое сделать?

zSpx · September 29, 2011

rgba цвет

Sedacove · September 29, 2011

rgba цвет

А по-подробней?

Nekromancer · September 29, 2011

rgba цвет
А по-подробней?

background: rgba(
0, // red
0, // green
0, // blue
0.5 // alpha opacity
);

Только для CSS3 совместимых браузеров.

http://ru.wikipedia.org/wiki/%D0%90%D0%BB%D1%8C%D1%84%D0%B0-%D0%BA%D0%B0%D0%BD%D0%B0%D0%BB

dostel1 · September 30, 2011

НЕ ЧИТАТЬ!

Edited September 30, 2011 by dostel1

SelenIT · September 30, 2011

dostel1, не фурычит (в FF как минимум). Наследование opacity так легко не обмануть.

Rgba — самый правильный вариант (не работает разве что в вымершей 9-й Опере, для IE 5.5-8 есть надежный костыль через filter). Альтернатива — фоновая картинка в png-24 (работает везде, кроме IE6, но ценой лишнего запроса к серверу).

dostel1 · September 30, 2011

SelenIT нужно фон позиционировать а не текст))я ошибся

Такой метод подойдет?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{
        margin:0;
        padding:0;
}

div.ss{
width:300px;
height:300px;
position:relative;
}
.opacity{width:100%;
height:100%;/*для IE */
	position: absolute;
	top:0;
	bottom:0;opacity:0.1;
	background: red;
	filter:Alpha(opacity=10)

}
.content{
	position: relative;z-index:1
}
</style>

</head>
<body>

<div class="ss">
<div class="opacity"></div>
 <div class="content">Лига Чемпионов 2011-2012 / 2 тур / Группа H / БАТЭ (Беларусь) – Барселона (Испания) / НТВ+ [2011 г., Футбол, SATRip]
 </div>


</body>
</html>

SelenIT · September 30, 2011

Такой подойдет. Но на мой взгляд, вариант с rgba (+ фильтр для IE, как и здесь) проще и логичнее, всё-таки фон должен быть фоном...

Sedacove · September 30, 2011

rgba цвет
А по-подробней?
background: rgba(
0, // red
0, // green
0, // blue
0.5 // alpha opacity
);
Только для CSS3 совместимых браузеров.
http://ru.wikipedia.org/wiki/%D0%90%D0%BB%D1%8C%D1%84%D0%B0-%D0%BA%D0%B0%D0%BD%D0%B0%D0%BB

Это просто отдельно от всего в CSS вставить? Странно, но у меня не работает...

Nekromancer · September 30, 2011

#selector {
   background: rgba(0, 0, 0, 0.5);
}

mishka · September 30, 2011

#selector {
   background: rgba(0, 0, 0, 0.5);
}

Дружище, ну ты тут не прав. Ты чего помагаешь лентяю? Он сам должен додуматься, попробовать варианты. Твоего первого сообщения вполне достаточно для не лентяя.

Nekromancer · September 30, 2011

#selector {
   background: rgba(0, 0, 0, 0.5);
}
Дружище, ну ты тут не прав. Ты чего помагаешь лентяю? Он сам должен додуматься, попробовать варианты. Твоего первого сообщения вполне достаточно для не лентяя.

Если это сарказм с намёком на Макса то прикол прокатил

mishka · September 30, 2011

#selector {
   background: rgba(0, 0, 0, 0.5);
}
Дружище, ну ты тут не прав. Ты чего помагаешь лентяю? Он сам должен додуматься, попробовать варианты. Твоего первого сообщения вполне достаточно для не лентяя.
Если это сарказм с намёком на Макса то прикол прокатил

ну не сарказм, прям, а так, подкол

SerTse · December 4, 2011

Спасибо за rgba, получилось, но не то, что хотелось.

Решил не плодить темы а написать в этой.

Подскажите, а как реализовать прозрачность как в меню слева на этом сайте.

Попробовал так, но что то не внушает доверия))

border: 10px solid;
    border-color: rgba(100,100,100,.1);
    border-radius: 1em;
    -o-border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;

Т.е. получилось как там, но если я заливаю это все фоном, то заливка происходит и под рамкой тоже. Как сделать чтобы background заливался до начала рамки?

Edited December 4, 2011 by SerTse

SelenIT · December 4, 2011

У тех же CSS3-совместимых (включая IE9) есть background-clip: padding-box.

Sign In

Прозрачность элемента.

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information