Hướng dẫn background cover css - bìa nền css
Show background-size là gì?Bài học này sẽ giúp các bạn thay đổi kích thước chiều rộng hoặc chiều cao của Cấu trúctag {
background-size: giá trị;
}0 có thể là:
Trong các giá trị trên, thì giá trị 1 là thường được dùng nhất, dùng nhiều khi muốn background full theo kích thước của thành phần bao ngoài, VD dùng trong những trang có background full màn hình window. Xem ví dụ dưới đây để hiểu rõ hơn về Chuẩn bịHTML viết:
CSS viết: div {
background: url(images/img_sakura.jpg) no-repeat;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Hiển thị trình duyệt khi chưa có background-size: background-size 1 thành phầnCSS viết: div {
background: url(images/img_sakura.jpg) no-repeat;
background-size: 300px;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Hiển thị trình duyệt khi chưa có background-size: background-size 1 thành phần Hiển thị trình duyệt:CSS viết: div {
background: url(images/img_sakura.jpg) no-repeat;
background-size: 300px 150px;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Hiển thị trình duyệt khi chưa có background-size: background-size 1 thành phần Hiển thị trình duyệt:CSS viết: div {
background: url(images/img_sakura.jpg) no-repeat;
background-size: 50%;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Hiển thị trình duyệt khi chưa có background-size: background-size 1 thành phần Hiển thị trình duyệt:coverCSS viết: div {
background: url(images/img_sakura.jpg) no-repeat;
background-size: cover;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Hiển thị trình duyệt khi chưa có background-size: background-size 1 thành phần Hiển thị trình duyệt: Ta thấy chiều rộng của background bây giờ là 300px, chiều cao được điều chỉnh theo tương ứng với tỷ lệ ban đầu. apx bpx- Hình nền sẽ có chiều rộng là a pixel và chiều cao là b pixel.background-size dùng để thiết lập "kích thước của hình nền". - Nếu một trong hai giá trị là auto thì giá trị đó sẽ tự động được xác định dựa theo giá trị còn lại sao cho đúng tỷ lệ với tấm hình gốc. Ví dụ: Tôi có một tấm hình với kích thước 200x100: Nếu giá trị thuộc tính background-size là 400px auto thì nó sẽ tương đương với 400px 200px Nếu giá trị thuộc tính background-size là auto 70px thì nó sẽ tương đương với 140px 70pxbackground-size, tôi có thể thiết lập kích thước của hình nền lớn hơn kích thước của tấm hình gốc. - Lưu ý: Nếu ta chỉ đưa ra một giá trị thì giá trị đó là chiều rộng của hình nền, giá trị còn lại sẽ mặc định là auto. . . . . 2) Cách sử dụng thuộc tính background-size trong CSS- Để sử dụng thuộc tính background-size, ta dùng cú pháp như sau:background-size, ta dùng cú pháp như sau: - Dưới đây là cách xác định & danh sách các "giá trị" được dùng cho thuộc tính background-size:background-size:
|
