Как придать прозрачность css-элементу на сайте
Продолжаю разбор новой темы своего блога. На этот раз мы поговорим о такой вещи как прозрачность CSS элементов. Прозрачность применена ко многим элементам новой темы — начиная с рекламного баннера заканчивая счетчиком статистики LiveInternet в подвале.
Прозрачность CSS для элемента сайта, или изображения можно задать несколькими способами. Причем можно сделать так, что при наведении курсора степень прозрачности будет меняться. Разберем несколько примеров.
Степень прозрачности регулируется следующими параметрами:
filter:alpha(opacity=от 10 до 100); — для Internet Explorer.
opacity:от 0,1 до 1; — для остальных браузеров.
Чем меньше значение, тем больше степень прозрачности и наоборот. Значение 1 (100 для IE) означает отсутствие прозрачности, значение 0,1 (10 для IE) — максимальную степень прозрачности.
Прозрачность CSS
Первый и самый простой пример — прописывание прозрачности для изображения в исходном коде. В этом примере степень прозрачности будет изменяться при наведении курсора.
Код выглядит следующим образом:
1
| <img src="путь к изображению" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> |
<img src="путь к изображению" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
Или можно сделать так: в css-стилях прописать:
1
2
3
4
5
6
7
8
| .img1 {
opacity:0.4;
filter:alpha(opacity=40);
}
.img1:hover { /* При наведении */
opacity:1;
filter:alpha(opacity=100);
} |
.img1 { opacity:0.4; filter:alpha(opacity=40);} .img1:hover { /* При наведении */ opacity:1; filter:alpha(opacity=100);}
а на странице использовать следующий код:
1
| <img class="img1" src="путь к изображению" /> |
<img class="img1" src="путь к изображению" />
Результат будет один и тот же:

Аналогичным образом можно сделать прозрачность для CSS-блока и текста. Но обо всем по порядку.
Самый простой способ — это прописать html-код со стилями блока, например вот так:
1
2
| <div style="background: #ff9900; opacity:0.4; width:200px; padding:50px;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />Блок CSS</div> |
<div style="background: #ff9900; opacity:0.4; width:200px; padding:50px;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />Блок CSS</div>
или, так же как и с изображением, использовать подключенный файл стилей, прописав в нем это:
1
2
3
4
5
6
7
8
9
| .blok1{
background: #ff9900;
opacity:0.4;
width:90px;
padding:50px;
}
.blok1:hover { /* При наведении */
opacity:1;
} |
.blok1{background: #ff9900;opacity:0.4; width:90px;padding:50px;}.blok1:hover { /* При наведении */opacity:1;}
А на странице вот это:
5ae6f47c7fe013b3112f1e790b283c45005
Результат:
Блок CSS
Переходим к тексту. Для текста практически все то же самое, но с небольшим отличием.
Самый простой код вот такой:
1
2
| <p style="color: #006600; opacity:0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />Наведи курсор, и текст станет непрозрачным.</p> |
<p style="color: #006600; opacity:0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />Наведи курсор, и текст станет непрозрачным.</p>
Ну и вариант с использованием стороннего файла css-стилей:
1
2
3
4
5
6
7
| .txt{
color:#006600;
opacity:0.4;
}
.txt:hover {
opacity:1;
} |
.txt{color:#006600;opacity:0.4;}.txt:hover {opacity:1;}
Код для html-страницы:
1
| <p class="txt" >Наведи курсор, и текст станет непрозрачным.</p> |
<p class="txt" >Наведи курсор, и текст станет непрозрачным.</p>
Результат:
Наведи курсор, и текст станет непрозрачным.
И напоследок. Если же Вам нужно задать прозрачность на постоянной основе, то используйте такие коды:
Для изображения:
1
| <img style="opacity:0.4; filter:alpha(opacity=40);" src="путь к изображению" /> |
<img style="opacity:0.4; filter:alpha(opacity=40);" src="путь к изображению" />
Для CSS-элемента:
1
| <div style="background: #ff9900; opacity:0.4; width:200px; padding:50px;" />Блок CSS</div> |
<div style="background: #ff9900; opacity:0.4; width:200px; padding:50px;" />Блок CSS</div>
Дополнительно можно задать прозрачность фонового цвета элемента. Для этого код цвета надо прописать в rgba-формате. Степень прозрачности указывается в последней, четвертой, цифре.
Пример:
background:rgba(204,0,51,0.509804);
Для текста:
1
| <p style="color: red; opacity:0.4; filter:alpha(opacity=40);">Полупрозрачный красный текст</p> |
<p style="color: red; opacity:0.4; filter:alpha(opacity=40);">Полупрозрачный красный текст</p>
Мы разобрали несколько вариантов для придания прозрачности CSS-элементам на сайте. Выбирайте наиболее подходящий вариант и используйте при верстке шаблона. Удачи!
Прикольно получается. А можно ли так все затемнить, но уже при наведение что бы так же оставалось?
О чем это ты?
Ну вот сейчас это все как серое, а когда мышкой наводишь становиться нормальным изображение, а можно сделать так что бы при наведении мышки нормальным оно не становилось, а оставалось прежним?
Можно. Это еще проще, чем вариант с наведением курсора.
Да, конечно можно!
Просто нужно поменять местами несколько строк в CSS коде. Если я не ошибаюсь, то так:
[css].img1 {
opacity:1;
filter:alpha(opacity=100);
}
.img1:hover { /* При наведении */
opacity:0.4;
filter:alpha(opacity=40);
}[/css]
Руслан имел ввиду то, чтобы изображение (элемент) было все время полупрозрачным. Тут нужно лишь это:
[css].img1 {
opacity:0.4;
filter:alpha(opacity=40);
}[/css]
А как сделать только один цвет полупрозрачным в css??
Хочу в хроме белый цвет в эскизных страница сделать полупрозрачным чтобы красивее было
Не совсем Вас понял, но попробуйте прописать вот это:
[css]
background: #fff;
opacity:0.4;
[/css]
Ставлю в css background: #e5e5e5; opacity:0.1;
Так у меня и background и текст на нем (это меню) прозрачным становятся
Как сделать, что-бы текст оставался НОРМАЛЬНЫМ?
И ничего не могу сделать
Спаибо.
Вот кусок меню:
/* MENU */
#nav {
background: #e5e5e5;
float: left;
margin: 0; padding: 0;
border-bottom: none;
}
#nav li a, #nav li {
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */