Руководство CSS Opacity
View more Tutorials:
CSS Opacity используется чтобы создать прозрачность (opacity) для элемента. Он принимает числовые значения от 0 до 1. Некоторые браузеры так же принимают процентное значение ( % ), но не все.
CSS {opacity: 1} это прозрачность по умолчанию у элемента, данное значение позволяет вам увидеть элемент самым четким образом. CSS {opacity:0} сделает элемент прозрачным (transparent).
opacity: <alpha-value>; /* Example: */ opacity: 1.0; opacity: 0.5; opacity: 0;
При примененнии прозрачности (Opacity) к одному элементу, свойство будет применено ко всему содержанию элемента, включая подэлементы. Не имеется наследственности прозрачности и вы можете настроить другое значение CSS Opacity для подэлемента, но на подэлемент все равно влияет прозрачность родительского элемента.
opacity-example.css
#parent { border: 1px solid blue; padding: 5px; background:lightblue; } .child { display: inline-block; background: lightgreen; padding: 5px; margin: 10px; height: 50px; width: 150px; } .option { border: 1px solid #eee; padding: 5px; margin: 10px 0px; }
opacity-example.html
<!DOCTYPE html> <html> <head> <title>CSS Opacity</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="opacity-example.css" /> <script> function changeOpa(event) { var opacityValue = event.target.value; var parentElement = document.getElementById("parent"); parentElement.style.opacity = opacityValue; } </script> </head> <body> <h3>CSS Opacity</h3> <p style="color:blue;">Set Opacity for parent element:</p> <div class="option"> <input type="radio" name="opa" onclick="changeOpa(event)" value="1" checked/> Opacity: 1 <br/> <input type="radio" name="opa" onclick="changeOpa(event)" value="0.5"/> Opacity: 0.5 <br/> <input type="radio" name="opa" onclick="changeOpa(event)" value="0"/> Opacity: 0 </div> <div id="parent"> I am a parent element <br/> <div class="child"> I am a child element. <br/> {opacity: 1} </div> <div class="child" style="opacity: 0.5"> I am a child element. <br/> {opacity: 0.5} </div> <br/> ... </div> </body> </html>
Например, измените прозрачность изображения (Image) когда курсор находится на (over) изображении.
opacity-hover-example.html
<!DOCTYPE html> <html> <head> <title>CSS Opacity</title> <meta charset="UTF-8"/> <style> .my-image { margin: 5px; } .my-image:hover { opacity: 0.5; } </style> </head> <body> <h3>CSS Opacity</h3> <p style="color:blue;">Move the cursor over Image</p> <img class="my-image" src="../images/flower.png" /> </body> </html>
Использование функции RGBA помогает вам создать цвет, комбинируя 4 значения Red, Green, Blue, Alpha. При этом Red, Green, Blue являются целыми числами (integer) получающие значения от 0-255. Alpha представляет прозрачность (opacity), получает значение от 0-1.
rgba(76, 175, 80, 0.1) rgba(76, 175, 80, 0.15) rgba(76, 175, 80, 1)
Цвет созданный с помощью RGBA имеет прозрачность, вы можете использовать данный цвет как цвет фона (background color) для элемента. Данная прозрачность работает только с фоном (background) элемента, не влияет на содержание элемента и его подэлементы.
- TODO Link!
grba-example.html
<!DOCTYPE html> <html> <head> <title>Transparent Box</title> <meta charset="UTF-8"/> <style> div { padding: 5px; } </style> </head> <body> <h3>Transparent Box</h3> <p style="color:blue;">With opacity:</p> <div style="background-color: rgba(76, 175, 80); opacity:0.1;"> {opacity:0.1} </div> <div style="background-color: rgba(76, 175, 80); opacity:0.3;"> {opacity:0.3} </div> <div style="background-color: rgba(76, 175, 80);opacity:0.6;"> {opacity:0.6} </div> <div style="background-color: rgba(76, 175, 80);"> {opacity:1.0} </div> <p style="color:blue;">With RGBA color values:</p> <div style="background-color: rgba(76, 175, 80, 0.1);"> {background-color: rgba(76, 175, 80, 0.1);} </div> <div style="background-color: rgba(76, 175, 80, 0.3);"> {background-color: rgba(76, 175, 80, 0.3);} </div> <div style="background-color: rgba(76, 175, 80, 0.6);"> {background-color: rgba(76, 175, 80, 0.6);} </div> <div style="background-color: rgba(76, 175, 80);"> {background-color: rgba(76, 175, 80);} </div> </body> </html>
Например создайте почти прозрачную рамку, содержащую текст описания изображения.
grba-example2.html
<!DOCTYPE html> <html> <head> <title>Transparent Box</title> <meta charset="UTF-8"/> <style> .img-container { display: inline-block; position: relative; } .img-desc { position: absolute; left: 5px; right: 5px; bottom: 15px; padding: 5px; text-align: center; background-color: rgba(76, 175, 80, 0.3); color: white; } </style> </head> <body> <h3>Transparent Box</h3> <div class = "img-container"> <img src="../images/image.png" width="320" height="178"/> <div class="img-desc"> This is an Image </div> </div> </body> </html>