Multi Background trong CSS
Thuộc tính Thuộc tính được sử dụng để thêm một hoặc nhiều hình ảnh tại một thời điểm mà không cần sử dụng HTML code. Bạn có thể thêm các hình ảnh mỗi khi cần đến. Cú pháp đơn giản của Multi Background giống như sau: #multibackground { background-image: url(../css/images/logo.pn ...
Thuộc tính
Thuộc tính được sử dụng để thêm một hoặc nhiều hình ảnh tại một thời điểm mà không cần sử dụng HTML code. Bạn có thể thêm các hình ảnh mỗi khi cần đến. Cú pháp đơn giản của Multi Background giống như sau:
#multibackground {
background-image: url(../css/images/logo.png), url(../css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
Bảng dưới liệt kê các giá trị thường được sử dụng:
| Giá trị | Miêu tả |
|---|---|
| background | Thiết lập tất cả các thuộc tính về background |
| background-clip | Khai báo một khu vực dành để Painting trong Background |
| background-image | Xác định Background Image |
| background-origin | Xác định vị trí của Background Image |
| background-size | Xác định kích cỡ của Background Image |
Ví dụ
Ví dụ sau minh họa cách thiết lập nhiều hình ảnh trên cùng một nền trong CSS:
<html>
<head>
<style>
#multibackground {
background-image: url(../css/images/logo.png), url(../css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id="multibackground">
<h1>www.tutorialspoint.com</h1>
<p>Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi
kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau
ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.</p>
</div>
</body>
</html>
Kết quả là:−
Kích cỡ của
Bạn có thể xác định các kích cỡ khác nhau cho các hình ảnh khác nhau được sử dụng trên một nền bởi sử dụng thuộc tính background-size. Cú pháp như sau:
#multibackground {
background: url(../css/imalges/logo.png) left top no-repeat, url(../css/images/boarder.png) right bottom no-repeat, url(../css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}
Như trong ví dụ trên, mỗi hình ảnh sẽ có kích cỡ cụ thể tương ứng là 50px, 130px và tự động.
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
