CSS background - Proprietate prescurtată
O proprietate prescurtată strânge mai multe declarații într-una singură, iar background face asta pentru toate proprietățile de fundal, ceea ce păstrează codul mai scurt.
Acoperă background-color, background-image, background-position, background-size, background-repeat, background-attachment, background-origin și background-clip.
Orice valoare pe care o omiți revine la valoarea ei implicită.
Exemplu
Culoarea, imaginea, repetarea și poziția stau aici toate într-o singură declarație prescurtată.
Prompt
O pagină HTML care setează mai multe proprietăți de fundal simultan, folosind forma prescurtată background.
Într-un bloc
<style> intern, setează fundalul body-ului folosind o singură declarație prescurtată: background: #ffffff url("img_tree.png") no-repeat right top. Adaugă un titlu și un paragraf.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
</style>
</head>
<body>
<h1>The background Shorthand Property</h1>
<p>All the background properties are set in one declaration.</p>
</body>
</html>
Forma lungă
Scris sub formă de proprietăți separate, același fundal ocupă toate aceste linii, pe care forma prescurtată le înlocuiește.
styles.css
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Toate proprietățile CSS de fundal
Referință rapidă pentru proprietățile de fundal:
background— toate proprietățile de fundal într-o singură declarație.background-attachment— dacă o imagine de fundal se derulează odată cu pagina sau rămâne fixă.background-clip— zona în care este vopsit fundalul.background-color— culoarea din spatele unui element.background-image— imaginea folosită ca fundal al unui element.background-origin— unde este poziționată imaginea de fundal.background-position— unde începe o imagine de fundal.background-repeat— cum se repetă o imagine de fundal.background-size— cât de mare este imaginea de fundal.