Fundaluri Background imagine CSS
CSS Tutorial » Fundaluri Background imagine CSS
Proprietățile de fundal CSS sunt utilizate pentru a adăuga efecte de fundal pentru elemente.
CSS oferă diverse proprietăți pentru proiectarea fundalului unei pagini web, inclusiv colorarea fundalului, plasarea imaginilor în fundal și gestionarea poziționării acestora etc.În aceste capitole, veți afla despre următoarele proprietăți de fundal CSS:
- culoare de fundal
- imagine de fundal
- fundal-repetare
- atașament de fundal
- fundal-poziție
- fundal (proprietate de stenografie)
Adaugare culoare de fundal in CSS
Proprietatea background-color este utilizată pentru a seta culoarea de fundal a unui element sau a intregii pagini web.
Următorul exemplu arată cum să setați culoarea de fundal pentru întreaga pagină.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Setarea culoarea de fundal a unui element în CSS</title>
<style>
body {
background-color: #F5EFB1;
}
h1 {
background-color: #87DABF;
}
</style>
</head>
<body>
<h1>Background Color Demo</h1>
<p>CSS definește cinci proprietăți pentru a seta fundalul fiecărui element <br />
Următorul exemplu prezintă o pagină web cu o culoare de fundal gri deschis: <br />
CSS și care stochează toate imaginile utilizate în proiectarea paginilor.<br />
Se aplică pentru: Toate elementele<br />
Valoarea initiala: transparent<br />
Proprietate: background-color<br />
Valori: color | transparent | inherit</p>
</body>
</html>
Valorile culorilor din CSS sunt cel mai adesea specificate în următoarele formate:
- un nume de culoare - precum "red"
- o valoare HEX - precum "#ff0000"
- o valoare RGB - precum "rgb(255, 0, 0)"
Tags: fundaluri css pentru pagini web, animat, gradient, exemplu, html, culoare, definiție pentru html css
Adaugare imagine de fundal - background
Proprietatea background-image setează o imagine ca fundal al unui element HTML.
Să vedem următorul exemplu care setează imaginea de fundal pentru întreaga pagină.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Proprietatea background-image setează o imagine ca fundal al unui element HTML</title>
<style>
body {
background-image: url("https://www.agernic.com/uploads/landscape_beach.jpg");
}
</style>
</head>
<body>
<h1>Proprietatea background-image setează o imagine ca fundal al unui element HTML</h1>
<p>CSS definește cinci proprietăți pentru a seta fundalul fiecărui element <br />
Următorul exemplu prezintă o pagină web cu o culoare de fundal gri deschis: <br />
CSS și care stochează toate imaginile utilizate în proiectarea paginilor.<br />
Se aplica pentru: Toate elementele<br />
Valoare inițială: transparent<br />
Proprietate: background-color<br />
Valori: color | transparent | inherit</p>
</body>
</html>
În mod implicit, browserul repetă sau acoperă imaginea de fundal atât pe orizontală, cât și pe verticală pentru a umple întreaga zonă a unui element. Puteți controla acest lucru cu proprietatea background-repeat.
Repetarea imagini pe fundal
Proprietatea background-repeat vă permite să controlați modul în care o imagine de fundal este repetată sau plasată în fundalul unui element. Puteți seta o imagine de fundal să se repete pe verticală (axa y), orizontal (axa x), în ambele direcții sau în nici una dintre direcții.
Să încercăm următorul exemplu care demonstrează cum se setează fundalul de gradient pentru o pagină web repetând imaginea decupată orizontal de-a lungul axei x.
În mod similar, puteți utiliza valoarea de repetare-y pentru a repeta imaginea de fundal pe verticală de-a lungul axei y, sau valoarea fără repetare pentru a evita repetarea totală.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Setări orizontale pentru repetarea fundalului în CSS</title>
<style>
body {
background-image: url("https://www.agernic.com/uploads/smiley.gif");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Proprietatea background-image setează o imagine ca fundal al unui element HTML</h1>
<p>CSS definește cinci proprietăți pentru a seta fundalul fiecărui element <br />
Următorul exemplu prezintă o pagină web cu o culoare de fundal gri deschis: <br />
CSS care stochează toate imaginile utilizate în proiectarea paginilor.<br />
Se aplica pentru: Todos los elementos<br />
valoarea initiala: transparent<br />
Propietatea: background-color<br />
Valoarea: color | transparent | inherit</p>
</body>
</html>
Ce este css, Inserare imagine fundal html, Culoare fundal html, Fonturi css, Imagine background HTML, Chenar html,
Inserare imagine fundal html, Fonturi css, Fundaluri Background imagine CSS, fundaluri css pentru pagina web
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.