Opacitatea imaginii CSS
Proprietatea opacity setează cât de transparent este un element.
Proprietatea opacity ia o valoare de la 0.0 la 1.0:
- 0.0 — elementul este complet transparent
- 0.5 — elementul este 50% transparent
- 1.0 — valoarea implicită; elementul este complet vizibil
Sfat: Consultați capitolul CSS Image Filters pentru a afla cum să folosiți proprietatea filter pentru a adăuga efecte vizuale precum opacitate, blur și saturație imaginilor.
Exemplu
Setați opacitatea unei imagini la 0.5 pentru a o face 50% transparentă.
Prompt
Creați o pagină care afișează trei imagini cu o pădure, una lângă alta, fiecare cu o valoare CSS opacity diferită: 0.2, 0.5 și 1.0. Etichetați fiecare imagine cu valoarea opacității sale dedesubt.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Opacity</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 20px;
align-items: flex-start;
}
.container div {
text-align: center;
}
.container img {
width: 200px;
height: auto;
}
.img1 {
opacity: 0.2;
}
.img2 {
opacity: 0.5;
}
.img3 {
opacity: 1.0;
}
</style>
</head>
<body>
<h2>Image Opacity</h2>
<div class="container">
<div>
<img class="img1" src="img_forest.jpg" alt="Forest">
<p>opacity 0.2</p>
</div>
<div>
<img class="img2" src="img_forest.jpg" alt="Forest">
<p>opacity 0.5</p>
</div>
<div>
<img class="img3" src="img_forest.jpg" alt="Forest">
<p>opacity 1.0 (default)</p>
</div>
</div>
</body>
</html>
Poziționarea textului pe imagine
Puteți folosi poziționarea CSS pentru a plasa text peste o imagine în diferite locații.
Sus stânga
Poziționați textul în colțul din stânga sus al unei imagini.
Prompt
Creați o pagină cu o imagine peisaj lată, într-un container cu position relative. Plasați textul alb „Sus Stânga” în colțul din stânga-sus al imaginii, folosind poziționare absolută.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Top Left</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 8px;
left: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Top Left</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Top Left</div>
</div>
</body>
</html>
Sus dreapta
Poziționați textul în colțul din dreapta sus al unei imagini.
Prompt
Creați o pagină cu o imagine peisaj lată, într-un container cu position relative. Plasați textul alb „Sus Dreapta” în colțul din dreapta-sus al imaginii, folosind poziționare absolută.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Top Right</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 8px;
right: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Top Right</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Top Right</div>
</div>
</body>
</html>
Jos stânga
Poziționați textul în colțul din stânga jos al unei imagini.
Prompt
Creați o pagină cu o imagine peisaj lată, într-un container cu position relative. Plasați textul alb „Jos Stânga” în colțul din stânga-jos al imaginii, folosind poziționare absolută.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Bottom Left</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
bottom: 8px;
left: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Bottom Left</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Bottom Left</div>
</div>
</body>
</html>
Jos dreapta
Poziționați textul în colțul din dreapta jos al unei imagini.
Prompt
Creați o pagină cu o imagine peisaj lată, într-un container cu position relative. Plasați textul alb „Jos Dreapta” în colțul din dreapta-jos al imaginii, folosind poziționare absolută.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Bottom Right</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
bottom: 8px;
right: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Bottom Right</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Bottom Right</div>
</div>
</body>
</html>
Centrat
Poziționați textul în centrul unei imagini.
Prompt
Creați o pagină cu o imagine peisaj lată, într-un container cu position relative. Plasați textul alb „Centrat” exact în centrul imaginii, folosind poziționare absolută și transform translate.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Centered</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Centered</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Centered</div>
</div>
</body>
</html>