Руководство CSS Opacity

View more Tutorials:

Pуководства CSS

CSS Opacity
RGBA

1- CSS Opacity

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>

2- RGBA

Использование функции 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>

View more Tutorials:

Pуководства CSS