Fundaluri CSS
Proprietățile CSS pentru fundal adaugă efecte de fundal elementelor.
În aceste capitole vei învăța despre aceste proprietăți de fundal:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(proprietatea prescurtată)
CSS background-color
Proprietatea background-color setează culoarea de fundal a unui element.
O culoare este de obicei scrisă ca un nume de culoare (precum red), o valoare HEX (precum #ff0000), sau o valoare RGB (precum rgb(255,0,0)).
Exemplu
Întreaga pagină primește un fundal albastru deschis.
<style> intern, setează background-color al body-ului la lightblue. Adaugă un titlu și un paragraf.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color.</p>
</body>
</html>
Alte elemente
Poți seta culoarea de fundal a oricărui element HTML, nu doar a paginii.
Exemplu
Elementele <h1>, <div> și <p> primesc fiecare o culoare de fundal diferită.
<style> intern, fă <h1> verde, <div> albastru deschis și <p> galben. Adaugă câte unul din fiecare element în body, astfel încât să apară cele trei culori de fundal.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>This is a div with a light blue background.</div>
<p>This paragraph has a yellow background.</p>
</body>
</html>
Opacitate / Transparență
Proprietatea opacity setează cât de transparent este un element, de la 0.0 la 1.0. O valoare mai mică înseamnă mai multă transparență.
Notă: Când folosești opacity pe un element, elementele copil primesc și ele aceeași transparență. Acest lucru poate face textul dintr-un element estompat greu de citit.
Exemplu
Div-ul are opacitate 0.3, astfel încât atât fundalul cât și textul său sunt estompate.
<style> intern, dă unui <div> un fundal verde și o opacitate de 0.3. Pune ceva text în interiorul div-ului, astfel încât opacitatea redusă (care afectează și textul) să fie vizibilă.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
background-color: green;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Opacity Example</h1>
<div>
<p>This div has opacity 0.3. The text inside it is faded too.</p>
</div>
</body>
</html>
Transparență folosind RGBA
Dacă nu vrei ca elementele copil să se estompeze, folosește o culoare RGBA în schimb. RGBA setează opacitatea doar a culorii de fundal, nu și a textului.
O culoare RGBA este scrisă ca rgba(red, green, blue, alpha). Alpha este un număr de la 0.0 (complet transparent) la 1.0 (complet opac).
Exemplu
Fundalul div-ului este 30% transparent, dar textul rămâne complet lizibil.
<style> intern, dă unui <div> un fundal rgba(0, 128, 0, 0.3) (verde cu opacitate 30%). Pune ceva text în interiorul div-ului, care ar trebui să rămână complet lizibil.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
background: rgba(0, 128, 0, 0.3); /* Green background with 30% opacity */
}
</style>
</head>
<body>
<h1>RGBA Transparency Example</h1>
<div>
<p>This div has a 30% transparent green background, but the text stays fully readable.</p>
</div>
</body>
</html>
Proprietatea CSS Background Color
Proprietatea acoperită în această pagină este background-color, care setează culoarea de fundal a unui element.