Thứ Năm, 26 tháng 12, 2013
nền CSS
Thuộc tính CSS nền được sử dụng để xác định các hiệu ứng nền của một phần tử.
Thuộc tính CSS được sử dụng cho hiệu ứng nền:
- background-color
- background-image
- background-repeat
- background-đính kèm
- background-position
Màu nền
Tài sản background-color chỉ định màu nền của một phần tử.
Màu nền của một trang được định nghĩa trong chọn cơ thể:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a lutip.com example.</p>
</body>
</html>
Thử nó cho mình »
Với CSS, một màu sắc thường được quy định bởi:
- một giá trị HEX - như "# ff0000"
- RGB giá trị - như "rgb (255,0,0)"
- một tên màu - như "đỏ"
Trong ví dụ dưới đây, h1, p, và các yếu tố div có màu nền khác nhau:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
Thử nó cho mình »
Hình ảnh nền
Tài sản background-image Một hình ảnh để sử dụng như là nền tảng của một phần tử.
Theo mặc định, hình ảnh được lặp đi lặp lại nó bao gồm toàn bộ phần tử.
Hình nền cho một trang có thể được thiết lập như thế này:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url('paper.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Thử nó cho mình »
Dưới đây là một ví dụ về một sự kết hợp xấu của văn bản và hình ảnh nền. Văn bản là gần như không thể đọc được:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url('bgdesert.jpg');}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>
</html>
Thử nó cho mình »
Hình ảnh nền - Lặp lại theo chiều ngang hoặc theo chiều dọc
Theo mặc định, các tài sản background-image lặp đi lặp lại một hình ảnh cả hai chiều ngang và theo chiều dọc.
Một số hình ảnh phải được lặp đi lặp lại chỉ theo chiều ngang hoặc theo chiều dọc, hoặc họ sẽ nhìn lạ, như thế này:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Thử nó cho mình »
Nếu hình ảnh được lặp đi lặp lại chỉ theo chiều ngang (repeat-x), nền sẽ nhìn tốt hơn:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Thử nó cho mình »
Hình ảnh nền - Thiết lập vị trí và không lặp lại
 | Lưu ý: Khi sử dụng một hình nền, sử dụng một hình ảnh mà không làm phiền các văn bản. |
|---|
Hiển thị hình ảnh chỉ một lần được quy định bởi thuộc tính background-repeat:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
Thử nó cho mình »
Trong ví dụ trên, hình nền được hiển thị trong cùng một vị trí như các văn bản. Chúng tôi muốn thay đổi vị trí của hình ảnh, để nó không làm phiền các văn bản quá nhiều.
Vị trí của các hình ảnh được quy định bởi thuộc tính background-position:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>
Thử nó cho mình »
Nền - tài sản Viết tắt
Như bạn có thể nhìn thấy từ các ví dụ trên, có rất nhiều tài sản để xem xét khi giao dịch với các nền tảng.
Để rút ngắn mã, nó cũng có thể xác định tất cả các thuộc tính trong một tài sản duy nhất. Này được gọi là một tài sản viết tắt.
Tài sản viết tắt cho nền chỉ đơn giản là "nền":
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>
</body>
</html>
Thử nó cho mình »
Khi sử dụng tài sản viết tắt thứ tự của các giá trị tài sản là:
- background-color
- background-image
- background-repeat
- background-đính kèm
- background-position
Nó không quan trọng nếu một trong các giá trị tài sản bị mất, miễn là những người có mặt là theo thứ tự này.
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét