Как придать прозрачность css-элементу на сайте

2013-11-27 | 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" />

Или можно сделать так: в css-стилях прописать:

 .img1 { 
  opacity:0.4;
  filter:alpha(opacity=40);
}
 .img1:hover { /* При наведении */
  opacity:1;
  filter:alpha(opacity=100);
}

а на странице использовать следующий код:

1	<img class="img1" src="путь к изображению" />

Результат будет один и тот же:

Аналогичным образом можно сделать прозрачность для CSS-блока и текста. Но обо всем по порядку.

Самый простой способ — это прописать html-код со стилями блока, например вот так:

1
2

&lt;div style=&quot;background: #ff9900; opacity:0.4; width:200px; padding:50px;&quot; onmouseover=&quot;this.style.opacity=1;this.filters.alpha.opacity=100&quot;
onmouseout=&quot;this.style.opacity=0.4;this.filters.alpha.opacity=40&quot; /&gt;Блок CSS&lt;/div&gt;

или, так же как и с изображением, использовать подключенный файл стилей, прописав в нем это:

.blok1{
background: #ff9900;
opacity:0.4; 
width:90px;
padding:50px;
}
.blok1:hover { /* При наведении */
opacity:1;
}

А на странице вот это:

766e0b715409488364c8f423f65124fe005

Результат:

Блок CSS

Переходим к тексту. Для текста практически все то же самое, но с небольшим отличием.

Самый простой код вот такой:

1
2

&lt;p style=&quot;color: #006600; opacity:0.4;&quot; onmouseover=&quot;this.style.opacity=1;this.filters.alpha.opacity=100&quot;
onmouseout=&quot;this.style.opacity=0.4;this.filters.alpha.opacity=40&quot; /&gt;Наведи курсор, и текст станет непрозрачным.&lt;/p&gt;

Ну и вариант с использованием стороннего файла css-стилей:

.txt{
color:#006600;
opacity:0.4;
}
.txt:hover {
opacity:1;
}

Код для html-страницы:

1	<p class="txt" >Наведи курсор, и текст станет непрозрачным.</p>

Результат:

Наведи курсор, и текст станет непрозрачным.

И напоследок. Если же Вам нужно задать прозрачность на постоянной основе, то используйте такие коды:

Для изображения:

1	<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>

Дополнительно можно задать прозрачность фонового цвета элемента. Для этого код цвета надо прописать в rgba-формате. Степень прозрачности указывается в последней, четвертой, цифре.

Пример:
background:rgba(204,0,51,0.509804);

Для текста:

1	<p style="color: red; opacity:0.4; filter:alpha(opacity=40);">Полупрозрачный красный текст</p>

Мы разобрали несколько вариантов для придания прозрачности CSS-элементам на сайте. Выбирайте наиболее подходящий вариант и используйте при верстке шаблона. Удачи!

Поделиться:

Записи по теме:

9 комментариев к записи "Как придать прозрачность css-элементу на сайте"

Руслан от 30.11.2013 в 22:17 пишет:

Прикольно получается. А можно ли так все затемнить, но уже при наведение что бы так же оставалось?

Ответить ↓
- Никита от 30.11.2013 в 23:02 пишет:
  
  О чем это ты?
  
  Ответить ↓
  - Руслан от 30.11.2013 в 23:12 пишет:
    
    Ну вот сейчас это все как серое, а когда мышкой наводишь становиться нормальным изображение, а можно сделать так что бы при наведении мышки нормальным оно не становилось, а оставалось прежним?
    
    Ответить ↓
    - Никита от 30.11.2013 в 23:22 пишет:
      
      Можно. Это еще проще, чем вариант с наведением курсора.
      
      Ответить ↓
- Кирилл от 04.12.2013 в 18:48 пишет:
  
  Да, конечно можно!
  Просто нужно поменять местами несколько строк в CSS коде. Если я не ошибаюсь, то так:
  [css].img1 {
  opacity:1;
  filter:alpha(opacity=100);
  }
  .img1:hover { /* При наведении */
  opacity:0.4;
  filter:alpha(opacity=40);
  }[/css]
  
  Ответить ↓
  - Никита от 04.12.2013 в 19:26 пишет:
    
    Руслан имел ввиду то, чтобы изображение (элемент) было все время полупрозрачным. Тут нужно лишь это:
    [css].img1 {
    opacity:0.4;
    filter:alpha(opacity=40);
    }[/css]
    
    Ответить ↓
Ди от 02.02.2014 в 02:02 пишет:

А как сделать только один цвет полупрозрачным в css??
Хочу в хроме белый цвет в эскизных страница сделать полупрозрачным чтобы красивее было

Ответить ↓
- Никита от 02.02.2014 в 17:18 пишет:
  
  Не совсем Вас понял, но попробуйте прописать вот это:
  [css]
  background: #fff;
  opacity:0.4;
  [/css]
  
  Ответить ↓
Вячеслав от 25.08.2014 в 03:20 пишет:

Ставлю в 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 */

Ответить ↓