Opacitatea imaginii CSS
Cât de transparent sau de opac arată un element se setează cu proprietatea opacity.
Valoarea ei merge de la 0.0 la 1.0: la 0.0 elementul este complet transparent, la 0.5 este 50% transparent, iar la 1.0, valoarea implicită, este complet opac.
Exemplu
Prompt
Afișați trei imagini una lângă alta cu valori diferite de opacitate: 0.2, 0.5 și 1.0 (implicit). Folosiți aceeași imagine pentru toate trei și etichetați fiecare cu valoarea sa de opacitate.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Opacity</title>
<style>
img {
width: 150px;
height: 113px;
}
</style>
</head>
<body>
<h2>Image Opacity</h2>
<p>opacity 0.2</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 0.2;">
<p>opacity 0.5</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 0.5;">
<p>opacity 1.0 (default)</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 1.0;">
</body>
</html>
Opacity și :hover
O combinație frecventă este opacity cu pseudo-clasa :hover, astfel încât opacitatea se schimbă la trecerea mausului.
Exemplu
Prompt
Afișați o imagine cu opacitate 0.5 implicit, care se schimbă la opacitate 1.0 la survolare. Folosiți o tranziție sau o schimbare directă a opacității pe pseudo-clasa :hover.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity and Hover</title>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h2>Opacity and :hover</h2>
<p>Hover over the image to see the full opacity effect:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="113">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="113">
</body>
</html>
Efect de hover inversat
Efectul funcționează și invers: poți face ca imaginile să devină transparente la hover, în loc să devină opace.
Exemplu
Prompt
Afișați imagini care sunt complet opace implicit și devin transparente (opacitate 0.5) la survolare. Acesta este efectul inversat la survolare.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reversed Hover Effect</title>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h2>Reversed Hover Effect</h2>
<p>Hover over the image to make it transparent:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="113">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="113">
</body>
</html>
Casete transparente
Dacă adaugi transparență fundalului unui element prin proprietatea opacity, fiecare element copil devine la fel de transparent, ceea ce poate face textul din interior greu de citit.
Exemplu
Prompt
Afișați patru cutii div cu fundal verde, fiecare cu valori diferite de opacitate: 1, 0.6, 0.3 și 0.1. Includeți text în interiorul fiecărei cutii pentru a demonstra că elementele copil devin de asemenea transparente atunci când se folosește proprietatea opacity.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Boxes</title>
<style>
div {
background-color: #04AA6D;
padding: 10px;
}
</style>
</head>
<body>
<h2>Transparent Boxes</h2>
<p>When using the opacity property, all child elements also become transparent:</p>
<div style="opacity: 1;"><p>opacity 1</p></div>
<div style="opacity: 0.6;"><p>opacity 0.6</p></div>
<div style="opacity: 0.3;"><p>opacity 0.3</p></div>
<div style="opacity: 0.1;"><p>opacity 0.1</p></div>
</body>
</html>
Transparență folosind background-color
Elementele copil rămân neafectate dacă renunți la opacity și îi dai lui background-color o valoare RGBA.
RGBA este RGB plus un canal alfa care ține opacitatea unei culori. Se scrie rgba(red, green, blue, alpha), unde alpha este un număr de la 0.0 (complet transparent) la 1.0 (complet opac).
Exemplu
Prompt
Afișați patru cutii div folosind valori de culoare de fundal RGBA în loc de proprietatea opacity. Folosiți rgba(4, 170, 109, alpha) cu valori alpha de 1.0, 0.6, 0.3 și 0.1. Includeți text în interiorul fiecărei cutii pentru a arăta că textul rămâne complet opac.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGBA Transparency</title>
<style>
div {
padding: 10px;
}
</style>
</head>
<body>
<h2>Transparency using RGBA</h2>
<p>With RGBA, only the background becomes transparent, not the text:</p>
<div style="background: rgba(4, 170, 109, 1.0);"><p>100% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.6);"><p>60% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.3);"><p>30% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.1);"><p>10% opacity</p></div>
</body>
</html>
Text într-o casetă transparentă
Exemplu
RGBA pe culoarea de fundal a unei casete aflate peste o imagine de fundal dă o casetă de text transparentă al cărei text rămâne lizibil.
Prompt
Creați un div cu o imagine de fundal (folosiți klematis.jpg din PromptCookbook) și o bordură. În interiorul acestuia, plasați un alt div cu un fundal alb semi-transparent folosind rgba(255, 255, 255, 0.6). În interiorul cutiei transparente, adăugați un paragraf cu text negru îngroșat care spune "Acesta este un text plasat în cutia transparentă."
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text in Transparent Box</title>
<style>
div.background {
background: url(https://prompt-cookbook.com) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<h2>Text in Transparent Box</h2>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>