CSS3 BACKGROUNDS

CSS3 cung cấp các thuộc tính mới cho phép thêm nhiều ảnh nền đến một phần tử. Một số thuộc tính: background-image, background-size, background-origin, background-clip. Trình duyệt hỗ trợ:

	Chrome	IE/Edge	Firefox	Safari	Opera
background-image (multiple backgrounds)	4.0 +	9.0 +	3.6 +	3.1 +	11.5 +
background-size	4.0 + 1.0 -webkit-	9.0 +	4.0 + 3.6 -moz-	4.1 + 3.0 -webkit –	10.5 + 10.0 -o-
background-origin	1.0 +	9.0 +	4.0 +	3.0	10.5 +
background-clip	4.0 +	9.0 +	4.0 +	3.0	10.5 +

Đối với thuộc tính background-size kể từ các phiên bản Chrome 1.0, Firefox 3.6, Safari 3.0, và Opear 10.0, có sử dụng thêm tiền tố (prefix) -webkit-, -moz-, và -o-.

background-image

Với CSS3, thuộc tính background-image cho phép thêm nhiều ảnh đến nền của một phần tử. Ví dụ sau thêm hai ảnh, ảnh img_flwr.gif được gán đến góc phải dưới (bottom right) và ảnh paper.gif được gán đến góc trái trên (top left):


#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

padding: 15px;

}

<div id="example1">

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

Kết quả:

bacground-size

Trước CSS3, kích cỡ ảnh nền là ảnh thực của ảnh. CSS3 cung cấp thuộc tính background-size cho phép xác định kích cỡ ảnh tuỳ ý.

Thuộc tính background-size có hai giá trị là contain – thay đổi kích cỡ sao cho khớp với vùng nội dung và cover – kích cỡ ảnh bằng hay lớn hơn vùng nội dung.

Ví dụ:


#div1 {

background: url(img_flower.jpg);

background-size: contain;

background-repeat: no-repeat;

}

#div2 {

background: url(img_flower.jpg);

background-size: cover;

background-repeat: no-repeat;

}

Kết quả

Ảnh ban đầu

Dùng contain

Dùng cover

background-origin

CSS3 cung cấp thuộc tính background-origin cho phép định vị ảnh nền của một phần tử. Các giá trị của background-origin:

border-box: ảnh nền bắt đầu từ góc trái trên của khung viền (border)
padding-box: ảnh nền bắt đầu từ góc trái trên của cạnh padding
content-box: ảnh nền bắt đầu từ góc trái trên của nội dung

Ví dụ:


#example1 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

}

#example2 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

background-origin: border-box;

}

#example3 {

border: 10px solid black;

padding: 35px;

background: url(img_flwr.gif);

background-repeat: no-repeat;

background-origin: content-box;

}

Kết quả

Không dùng background-origin

Dùng border-box

Dùng content-box

background-clip

CSS3 cung cấp thuộc tính background-clip cho phép xác định vùng vẽ của nền

Các giá trị của background-origin:

border-box: nền được vẽ đến bên ngoài cạnh khung viền
padding-box: nền được vẽ đến bên ngoài cạnh padding
content-box: nền được vẽ với vùng nội dung

Ví dụ:


#example1 {

border: 10px dotted black;

padding:35px;

background: yellow;

}

#example2 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: padding-box;

}

#example3 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: content-box;

}

Kết quả

Không dùng background-clip