AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Fundaluri Background imagine CSS


Next Page >>
HTML images

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?.

Ejemplo
<!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?.

Ejemplo
<!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>
Not?: Atunci cānd aplica?i imaginea de fundal unui element, asigura?i-v? c? imaginea pe care o alege?i nu afecteaz? lizibilitatea con?inutului text al elementului.

Ī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?.

Ejemplo
<!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

HTML culoare
Tags: Inserare imagine fundal html

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


analytics piwika