CSS свойство opacity - httpdoc.ru

CSS непрозрачность

Свойство CSS Opacity используется для изменения прозрачности элемента.

Как применить прозрачность CSS

Значение непрозрачности CSS находится в диапазоне от 0 до 1, например 0,2, 0,4. Меньшее значение непрозрачности отображает большую непрозрачность.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Image Opacity </title> 
  <meta charset="UTF-8"> 
<style>  
 img.trans {  
  opacity: 0.6;  
  filter: alpha(opacity=40);  
}  
</style>  
</head>  

<body>  
 <p>Normal Image</p>  
 <img src="PUBG.png" alt="normal" style="width:50%;"> <br /><br />
 <p>Transparent Image</p> 
 <img class="trans" src="PUBG.png" alt="transparent" style="width:50%;">  
</body>  
</html>

Выход

CSS Image Opacity

Нормальное изображение

обычный

Прозрачное изображение

прозрачный

Эффект прозрачного наведения

Свойство прозрачности CSS можно использовать вместе с hover селектором для изменения прозрачности при наведении указателя мыши.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Image Transparent </title> 
  <meta charset="UTF-8"> 
<style>
 i:hover {
  opacity: 0.5;
  filter: alpha(opacity=40);
 }
</style>
</head>

<body>

<i><img src="PUBG-GAME.png" alt="PUBG Image Hover" style="width:32%;"></i>
<i><img src="PUBG-GAME.png" alt="PUBG Image Hover" style="width:32%;"></i>
<i><img src="PUBG-GAME.png" alt="PUBG Image Hover" style="width:32%;"></i>

</body>
</html>

Выход

CSS Image Transparent PUBG Image Hover PUBG Image Hover PUBG Image Hover

Текст в прозрачном поле

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Text Transparent </title> 
  <meta charset="UTF-8"> 
<style> 
 #div1 {       
  padding: 50px;
  margin-right:400px;
  color: #000000;
  text-align:center;
  background: seagreen;
  }
 #div2 {        
  padding: 50px;
  margin-right:400px;
  color: #000000;
  text-align:center;
  background: seagreen;
  opacity: .5;
  }
 #div3 {       
  padding: 50px;
  margin-right:400px;
  text-align:center;
  color: #000000;
  background: seagreen;
  opacity: .2;
  }
 #div4 {       
  padding: 50px;
  margin-right:400px;
  text-align:center;
  color: #000000;
  background: seagreen;
  opacity: 0.1;
 }
</style>
</head>
<body>
 <div id="div1"><b>PUBG</b></div><br />
 <div id="div2"><b>COC</b></div><br />
 <div id="div3"><b>Mortal Kombat</b></div><br />
 <div id="div4"><b>Call of Duty</b></div>
</body>
</html>

Выход

CSS Text Transparent
PUBG

КОК

Смертельная битва

Чувство долга