Neprůhlednost/průhlednost obrázku CSS
Obsah
Vlastnost opacity určuje neprůhlednost/průhlednost prvku.
Průhledný obrázek
Vlastnost opacity může mít hodnotu od 0,0 do 1,0. Čím nižší hodnota, tím transparentnější:
opacity 0.2
opacity 0.5
opacity 1
(default)
Příklad
img {
opacity: 0.5;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Transparentní efekt vznášení
Vlastnost opacity se často používá spolu s selektorem :hover ke změně neprůhlednosti při přejetí myší:
Příklad
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Příklad vysvětlen
První CSS blok je podobný kódu v příkladu 1. Navíc jsme přidali, co se má stát, když uživatel najede na jeden z obrázků. V tomto případě chceme, aby obrázek NEBYL průhledný, když na něj uživatel najede myší. CSS pro to je opacity:1;.
Když se ukazatel myši vzdálí od obrázku, obrázek bude opět průhledný.
Příklad obráceného efektu vznášení:
Příklad
img:hover {
opacity: 0.5;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Průhledná krabička
Při použití vlastnosti opacity k přidání průhlednosti na pozadí prvku, všechny jeho podřízené prvky zdědí stejnou průhlednost. To může způsobit, že text uvnitř plně průhledného prvku bude obtížně čitelný:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Příklad
div {
opacity: 0.3;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #04AA6D;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>
Transparentnost pomocí RGBA
Pokud nechcete použít neprůhlednost na podřízené prvky, jako v našem příkladu výše, použijte hodnoty barev RGBA. Následující příklad nastavuje neprůhlednost pro barvu pozadí a ne pro text:
100% opacity
60% opacity
30% opacity
10% opacity
Z naší kapitoly o barvách CSS jste se dozvěděli, že jako hodnotu barvy můžete použít RGB. Kromě RGB, můžete použít hodnotu barvy RGB s alfa kanálem (RGBA) - který určuje krytí pro barvu.
Hodnota barvy RGBA je určena pomocí: rgba(červená, zelená, modrá, alfa). The Parametr alpha je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).
Tip: Více o barvách RGBA se dozvíte v naší kapitole o barvách CSS.
Příklad
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(4, 170, 109);
padding: 10px;
}
div.first {
background: rgba(4, 170, 109, 0.1);
}
div.second {
background: rgba(4, 170, 109, 0.3);
}
div.third {
background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>
Text v průhledné krabičce
This is some text that is placed in the transparent box.
Příklad
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Příklad vysvětlen
Nejprve vytvoříme prvek <div> (class="background") s obrázkem na pozadí a ohraničením.
Poté vytvoříme další <div> (class="transbox") uvnitř prvního <div>.
The <div class="transbox"> mají barvu pozadí a ohraničení - div je průhledný.
Uvnitř průhledná <div>, přidáme nějaký text do prvku <p>.