Danh ngôn cuộc sống:
• Bài viết được đăng bởi: Mr. Phan Nhan• Ngày cập nhật bài viết: 11/05/2016• Tổng lược xem trang: 140 / 1 khách• Đánh giá bởi người dùng: |
Thuộc tính background-attachment : xác định thành phần nền được cố định hoặc cuộn so với trang. Được sử dụng kèm với giá trị background-image. Với url là đường dẫn tới hình được sử dụng làm hình nền.
<html>
<head>
<style type="text/css">
div {
background: url(background-web.gif) no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Thuộc tính background-color : xác định màu nền cho thành phần.
- background-position: left top; Hình nằm bên trái - phía trên thành phần (đây là dạng mặc định).
- background-position: left bottom; Hình nằm bên trái - phía dưới thành phần.
- background-position: left center; Hình nằm bên trái - canh giữa thành phần.
- background-position: right top; Hình nằm bên phải - phía trên thành phần (đây là dạng mặc định).
- background-position: right bottom; Hình nằm bên phải - phía dưới thành phần.
- background-position: right center; Hình nằm bên phải - canh giữa thành phần.
- background-position: center top; Hình nằm giữa - phía trên thành phần (đây là dạng mặc định).
- background-position: center bottom; Hình nằm giữa - phía dưới thành phần.
- background-position: center center; Hình nằm giữa - canh giữa thành phần.
- background-position: đơnvị đơnvị; Hình nằm cách bên trái với khoảng cách bằng đơn vị - cách phía trên với khoảng cách bằng đơn vị.
Ví dụ: background-position: 5px 15px; thì code chúng ta viết như sau:
Ví dụ 1: nếu muốn cho nền lập lại theo chiều ngang ta dùng đoạn mã background-repeat: repeat-x; như bên dưới.
Ví dụ: bạn muốn trình duyệt hiển thị nền màu #ff0000, có hình nằm bên trái - phía trên thành phần thì ta viết như sau:
<html>
<head>
<style type="text/css">
div {
background: url(background-web.gif) no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
background-color: #ff0000;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Thuộc tính background-image : xác định hình ảnh nền cho thành phần. Với url là đường dẫn tới hình được sử dụng làm hình nền.<head>
<style type="text/css">
div {
background-color: #ff0000;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Thuộc tính background-position : xác định vị trí hình ảnh nền cho thành phần. Được sử dụng kèm với giá trị background-image và background-repeat.<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
background-position có các cặp giá trị như sau:<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
- background-position: left top; Hình nằm bên trái - phía trên thành phần (đây là dạng mặc định).
- background-position: left bottom; Hình nằm bên trái - phía dưới thành phần.
- background-position: left center; Hình nằm bên trái - canh giữa thành phần.
- background-position: right top; Hình nằm bên phải - phía trên thành phần (đây là dạng mặc định).
- background-position: right bottom; Hình nằm bên phải - phía dưới thành phần.
- background-position: right center; Hình nằm bên phải - canh giữa thành phần.
- background-position: center top; Hình nằm giữa - phía trên thành phần (đây là dạng mặc định).
- background-position: center bottom; Hình nằm giữa - phía dưới thành phần.
- background-position: center center; Hình nằm giữa - canh giữa thành phần.
- background-position: đơnvị đơnvị; Hình nằm cách bên trái với khoảng cách bằng đơn vị - cách phía trên với khoảng cách bằng đơn vị.
Ví dụ: background-position: 5px 15px; thì code chúng ta viết như sau:
<html>
<head>
<style type="text/css">
p {
background-image: url(background-web.gif);
background-repeat: no-repeat;
background-position: 5px 15px;
padding-left: 10px;
}
</style>
</head>
<body>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</body>
</html>
Thuộc tính background-repeat : xác định hình ảnh nền được lặp như thế nào. Được sử dụng kèm với giá trị background-image.<head>
<style type="text/css">
p {
background-image: url(background-web.gif);
background-repeat: no-repeat;
background-position: 5px 15px;
padding-left: 10px;
}
</style>
</head>
<body>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</body>
</html>
Ví dụ 1: nếu muốn cho nền lập lại theo chiều ngang ta dùng đoạn mã background-repeat: repeat-x; như bên dưới.
<html>
<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Ví dụ 2: nếu muốn cho nền lập lại theo chiều dọc ta dùng đoạn mã background-repeat: repeat-y; như bên dưới.<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Ví dụ 3: nếu muốn cho nền lập lại toàn phần ta dùng đoạn mã background-repeat: repeat; như bên dưới.<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: repeat;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Ví dụ 4: nếu muốn cho nền không lập lại ta dùng đoạn mã background-repeat: no-repeat; như bên dưới.<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: repeat;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Thuộc tính background : Có giá trị riêng lẻ hoặc kết hợp các thuộc tính background-color, background-image, background-repeat, background-position, background-attachment lại với nhau để cho ra một cách hiển thị đặc biệt.<head>
<style type="text/css">
div {
background-image: url(background-web.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Ví dụ: bạn muốn trình duyệt hiển thị nền màu #ff0000, có hình nằm bên trái - phía trên thành phần thì ta viết như sau:
<html>
<head>
<style type="text/css">
div {
background: #ff0000 url(background-web.gif) no-repeat left top;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
<head>
<style type="text/css">
div {
background: #ff0000 url(background-web.gif) no-repeat left top;
}
</style>
</head>
<body>
<div>
<p>đây là nơi chứa nội dung cần hiển thị</p>
</div>
</body>
</html>
Những bài viết được đăng mới nhất. 



