CSS3 cho phép bạn thêm nhiều ảnh nền cho một phần tử, thông qua thuộc tính background-image.
Các hình nền khác nhau được phân cách bằng dấu phẩy, và những hình ảnh được xếp chồng lên nhau, nơi những hình ảnh đầu tiên là gần gũi nhất với người xem.
Ví dụ sau đây có hai hình ảnh nền, hình ảnh đầu tiên là một bông hoa (liên kết đến phía dưới và bên phải) và hình ảnh thứ hai là một nền giấy (canh vào góc trên bên trái):
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<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>
</body>
</html>
Các hình nền khác nhau được phân cách bằng dấu phẩy, và những hình ảnh được xếp chồng lên nhau, nơi những hình ảnh đầu tiên là gần gũi nhất với người xem.
Ví dụ sau đây có hai hình ảnh nền, hình ảnh đầu tiên là một bông hoa (liên kết đến phía dưới và bên phải) và hình ảnh thứ hai là một nền giấy (canh vào góc trên bên trái):
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<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>
</body>
</html>
CSS 3 với ngành thiết kế giao diện website :http://tocdothietkewebsite.tumblr.com/ . Hãy cố gắng học CSS3 nhé các bạn.
0 nhận xét: