28 C
Hanoi
Thứ Sáu, Tháng Bảy 12, 2024

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.

Thuộc tính background-attachment | xác định thành phần nền được cố định...

Thuộc tính background-attachment

Cấu trúc

tag {
    Thuộc tính: giá trị;
}
  • 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.
  • Nhấp vào nút chạy để xem kết quả
  • Nhấp vào phần nội dung code để chỉnh sửa và nhấp nút chạy để xem kết quả.
<html>
<head>
<style type="text/css">
div {
    background: url(https://tonghop.org/wp-content/uploads/2021/08/512x512.png) no-repeat;
    background-attachment: fixed;
}
</style>
</head>
  <body>
<div>
<p>background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br />
background-attachment<br /></p>
</div>
</body>
</html>

Thuộc tính background-color

Thuộc tính background-color : xác định màu nền cho thành phần.

<html> 
  <head> 
    <style type="text/css"> 
      div { background-color: blue; } 
    </style> 
  </head> 
  <body> 
    <div> 
      <p>background-color: xác định màu nền cho thành phần<br /> 
        background-color: xác định màu nền cho thành phần<br /> 
        background-color: xác định màu nền cho thành phần<br />
      </p> 
    </div> 
  </body> 
</html>

Thuộc tính background-image

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.

<html>
<head>
<style type="text/css">
div {
    background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
}
</style>
</head>

<body>
<div>
<p>
  background-image<br />
  background-image<br />
  background-image<br />
  background-image<br />
  background-image<br />
  background-image<br />
  background-image<br />
  background-image<br />
  background-image<br />
  background-image<br />

</p>
</div>
</body>
</html>

Thuộc tính background-position

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-imagebackground-repeat.

<html>
<head>
<style type="text/css">
div {
    background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
    background-repeat: no-repeat;
    background-position: right top;
}
</style>
</head>

<body>
<div>
<p>
  background-position<br />
  background-position<br />
  background-position<br />
  background-position<br />
  background-position<br />
  background-position<br />
  </p>
</div>
</body>
</html>

background-position có các cặp giá trị như sau:

  1. 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
  2. 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
  3. 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
  4. background-position: 5px 15px; 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;
<html>
<head>
<style type="text/css">
p {
    background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 10px;
}
</style>
</head>

<body>
<p>background-position</p>
</body>
</html>

Thuộc tính background-repeat

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.

background-repeat: repeat-x;

<html>
<head>
<style type="text/css">
div {
    background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
    background-repeat: repeat-x;
}
</style>
</head>

<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>

background-repeat: repeat-y;

<html>
<head>
<style type="text/css">
div {
    background-image: url(bg_webstd.gif);
    background-repeat: repeat-y;
}
</style>
</head>

<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>

background-repeat: repeat;

<html>
<head>
<style type="text/css">
div {
    background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
    background-repeat: repeat;
}
</style>
</head>

<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>

background-repeat: no-repeat;

<html>
<head>
<style type="text/css">
div {
    background-image: url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png);
    background-repeat: no-repeat;
}
</style>
</head>

<body>
<div>
<p>background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br />
background-repeat<br /></p>
</div>
</body>
</html>

Chú ý: Thuộc tính background

Thuộc tính background : Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính background-color, background-image, background-repeat, background-position, background-attachment.

Cách viết như sau:
background: color image repeat position attachment;
Ví dụ: background: #990000 url(bg_webstd.gif) no-repeat left top fixed;

<html>
<head>
<style type="text/css">
div {
    background: #990000 url(https://tonghop.org/wp-content/uploads/tdn_pic_3.png) no-repeat left top;
}
</style>
</head>

<body>
<div>
<p>background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br /></p>
</div>
</body>
</html>

BÀI VIẾT MỚI

Cách đăng ký sim giá rẻ LINEMO (LINE) – Mới Nhất

Giới thiệu: Nhà mạng Linemo được đổi tên từ nhà...

Hướng dẫn kiếm tiền từ Google AdSense mới nhất!

Google AdSense là gì? Kiếm tiền online là một từ...

Địa điểm ngắm lá đỏ đẹp nhất ở KANTO- Nhật Bản.

Ai đã từng đặt chân đến Nhật Bản, chắc...

QUẦY TƯ VẤN CHO NGƯỜI NƯỚC NGOÀI TẠI NHẬT BẢN MIỄN PHÍ

Quầy tư vấn cho người nước ngoài tại Nhật...

Tổng hợp sim giá rẻ ở Nhật Bản

Hôm nay mình xin giới thiệu đến các bạn...

Hướng dẫn đăng ký tài khoản Rakuten.

Mục đích đăng ký tài khoản rakuten: Tài khoản rakuten...

Hướng dẫn thủ tục xin miễn giảm thuế cuối năm khi làm việc tại Nhật Bản (Điều chỉnh tiền thuế cuối năm).

Hai khoản thuế này đáng nhẽ ra là từng cá nhân sẽ phải tự kê khai và nộp cho cơ quan thuế, tuy nhiên, đối với các bạn đang đi làm tại các công ty thì thường bộ phận hành chính của công ty sẽ đại diện cho nhân viên của công ty làm các thủ tục thay cho tất cả nhân viên trong đó có bạn.

Dân số Nhật Bản giảm kỷ lục trong 13 năm liên tiếp.

Theo dữ liệu chính thức từ chính phủ Nhật...

7 lễ hội mùa hè Nhật Bản bạn nhất định phải trải nghiệm

   Mùa hè ở Nhật còn được coi là...

Trợ Cấp Nghỉ Phép Chăm Con Sau Sinh ở Nhật Bản

Sau khi sinh con ở Nhật, bạn có thể...

Tiếng Nhật về Mẹ và Trẻ Sơ Sinh

Để các mẹ thuận lợi hơn trong việc sinh...

Tiếng Nhật bệnh hay gặp ở trẻ em

Dưới đây là một số triệu chứng và bệnh...

Tiếng Nhật khi làm thêm ở Combini

Bạn nhận được công việc làm thêm ở Combini,...

Cách ghi tờ khai xuất cảnh tại Nhật

Với những bạn lần đầu về nước từ Nhật,...

Thủ tục xin nhập quốc tịch Nhật

Nhật bản là nước phát triển bậc nhất thế...

ĐƯỢC QUAN TÂM

Thủ tục xin làm thêm 28 tiếng tại Nhật

ĐỐI TƯỢNG: Đối tượng cần làm đơn xin làm thêm...

Cách đăng ký sim giá rẻ LINEMO (LINE) – Mới Nhất

Giới thiệu: Nhà mạng Linemo được đổi tên từ nhà...

Đơn xin làm thêm 28 tiếng – Hướng dẫn chi tiết.

ĐỐI TƯỢNG: Đối tượng cần làm đơn xin làm thêm...

Hướng dẫn kiếm tiền từ Google AdSense mới nhất!

Google AdSense là gì? Kiếm tiền online là một từ...

Bùng điện thoại ở Nhật Bản – Góc cảnh báo!!!

Tìm hiểu thêm: Tổng hợp sim giá rẻ ở...

Địa điểm ngắm lá đỏ đẹp nhất ở KANTO- Nhật Bản.

Ai đã từng đặt chân đến Nhật Bản, chắc...

Hướng dẫn thủ tục xin miễn giảm thuế cuối năm khi làm việc tại Nhật Bản (Điều chỉnh tiền thuế cuối năm).

Hai khoản thuế này đáng nhẽ ra là từng cá nhân sẽ phải tự kê khai và nộp cho cơ quan thuế, tuy nhiên, đối với các bạn đang đi làm tại các công ty thì thường bộ phận hành chính của công ty sẽ đại diện cho nhân viên của công ty làm các thủ tục thay cho tất cả nhân viên trong đó có bạn.

Tổng hợp sim giá rẻ ở Nhật Bản

Hôm nay mình xin giới thiệu đến các bạn...

Hướng dẫn đăng ký tài khoản Rakuten.

Mục đích đăng ký tài khoản rakuten: Tài khoản rakuten...

Cách photo copy giấy tờ 2 mặt tại combini

Tại Nhật, các máy photo copy thường có trong...