CSS3 Backgrounds

Chủ Nhật, 29 tháng 12, 2013

CSS3 Backgrounds

«Trở lại

Chương tiếp theo »

Nền CSS3

CSS3 có chứa một số tính chất nền tảng mới,
cho phép kiểm soát tốt hơn các yếu tố nền tảng.

Trong chương này, bạn sẽ tìm hiểu về các tính chất nền sau đây:

nền kích thước
background-nguồn gốc

Bạn cũng sẽ tìm hiểu làm thế nào để sử dụng nhiều hình ảnh nền.

Hỗ trợ trình duyệt

Tài sản	Hỗ trợ trình duyệt
nền kích thước
background-nguồn gốc

Internet Explorer 9 +, Firefox, Chrome, Safari, và Opera hỗ trợ các tính chất nền tảng mới.

CSS3 Các nền kích thước tài sản

Tài sản background-size chỉ định kích thước của hình nền.

Trước khi CSS3, kích thước hình ảnh nền được xác định bằng kích thước thực tế của hình ảnh. Trong CSS3 có thể xác định kích thước của ảnh nền, cho phép chúng ta tái sử dụng hình ảnh nền trong các bối cảnh khác nhau.

Bạn có thể xác định kích thước bằng pixel hoặc tỷ lệ phần trăm. Nếu bạn xác định kích thước theo tỷ lệ, kích thước tương đối so với chiều rộng và chiều cao của phần tử cha mẹ.

Ví dụ 1

Thay đổi kích thước một hình nền:

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background:url(img_flwr.gif);

background-size:80px 60px;

background-repeat:no-repeat;

padding-top:40px;

}

</style>

</head>

<body>

<p>

</p>

<p>Original image: <img src="img_flwr.gif" alt="Flowers" width="224" height="162"></p>

</body>

</html>

Thử nó cho mình »

Ví dụ 2

Căng hình nền hoàn toàn điền vào các khu vực nội dung:

<!DOCTYPE html>

<html>

<head>

<style>

div

{

background:url(img_flwr.gif);

background-size:100% 100%;

background-repeat:no-repeat;

}

</style>

</head>

<body>

<div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

</div>

</body>

</html>

Thử nó cho mình »

CSS3 Các tài sản nền có nguồn gốc

Tài sản nền có nguồn gốc xác định khu vực vị trí của các hình ảnh nền.

Hình nền có thể được đặt trong nội dung hộp, đệm-box, hoặc khu vực cửa hộp.

Ví dụ

Định vị hình ảnh nền trong nội dung hộp:

<!DOCTYPE html>

<html>

<head>

<style>

div

{

border:1px solid black;

padding:35px;

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-position:left;

}

#div1

{

background-origin:border-box;

}

#div2

{

background-origin:content-box;

}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

</div>

<p>background-origin:content-box:</p>

</div>

</body>

</html>

Thử nó cho mình »

CSS3 Nhiều hình ảnh nền
CSS3 cho phép bạn sử dụng một số hình ảnh nền cho một thành phần.

Ví dụ

Thiết lập hai hình ảnh nền cho các phần tử cơ thể:

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background:url(img_tree.gif),url(img_flwr.gif);

background-size:100% 100%;

background-repeat:no-repeat;

}

</style>

</head>

<body>

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

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

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

</body>

</html>

Thử nó cho mình »

«Trở lại

Chương tiếp theo »

Các tin khác

lập trình trực tuyến

Pages

Chủ Nhật, 29 tháng 12, 2013