Hình nền javascript
|
Tạm gác qua các khái niệm về Box Model qua một bên mà ở phần này chúng ta sẽ làm quen với một loại thuộc tính cũng rất thú vị và có tác dụng làm đẹp trang web của bạn lên hơn, đó là các thuộc tính bổ sung màu nền Show Màu nền với màu nềnNếu bạn muốn thiết lập màu nền bằng CSS thì có thể sử dụng thuộc tính tag {
background-size: giá trị;
}0 và giá trị của nó là tên màu hoặc mã màu HEX/RBG, mình thì thường sử dụng nhất là mã màu Hex vì nó đa dạng và dễ sử dụng hơnXem Pen dPBjEO của Thạch Phạm (@thachpham92) trên CodePen Ảnh nền với hình nềnĐối với thuộc tính bổ sung ảnh nền thì chúng ta sẽ sử dụng tag {
background-size: giá trị;
}1 và nó còn có thêm nhiều thuộc tính khác nữa kèm theo mà mình sẽ nói bên dưới. Dưới đây là ví dụ lấy một tấm ảnh sử dụng làm ảnh nền[codepen id=”dPBqbN”] Nhớ là đối với các giá trị loại URL thì bạn phải có một hàm tag {
background-size: giá trị;
}2 để bọc cái đường dẫn của URL lại nhéNgoài ra, bạn có thể thêm nhiều ảnh nền khác nhau trên cùng một khối bằng cách sử dụng nhiều giá trị tag {
background-size: giá trị;
}2 và các giá trị phải được cách nhau bởi dấu phẩy. Ví dụbackground-image: url(‘ảnh 1’), url(‘ảnh 2’); Tùy chỉnh lại ảnh nền với lặp lại nềnMặc dù định nghĩa khi sử dụng ảnh nền, thì ảnh nền sẽ được lặp lại theo cả chiều ngang và chiều dọc cho đến khi ảnh nền xóa toàn bộ phần tử. Nhưng bạn cũng có thể tùy chỉnh lại việc lặp lại ảnh nền thông qua thuộc tính tag {
background-size: giá trị;
}4, nó hỗ trợ các giá trị như sau
Một ví dụ của DMD về việc lặp lại ảnh nền [codepen id=”yydQNK”] Đổi vị trí ảnh nền với vị trí nềnĐối với các ảnh nền có kích thước nhỏ hoặc sử dụng kích thước nền để chỉnh sửa lại kích thước, bạn có thể cần phải thay đổi vị trí hiển thị của ảnh nền đó, và bạn có thể sử dụng thuộc tính nền-vị trí này. It has an number of value as after
Đối với thuộc tính này, bạn có thể viết tối đa cùng lúc hai giá trị. Ví dụ bạn muốn ảnh của bạn sẽ nằm bên phải trên phần tử thì sẽ có giá trị là tag {
background-size: giá trị;
}09. Bạn cũng có thể thiết lập giá trị cho nhiều ảnh nền cùng kiểu vào lúc tag {
background-size: giá trị;
}10Ngoài ra còn có thêm một vài thuộc tính dành riêng cho biến tùy biến ảnh nền nữa nhưng bạn có thể tham khảo thêm tại CSS Reference nhé Lời kếtMặc dù trong bài viết này mình không nói hết toàn bộ thuộc tính liên quan đến ảnh nền nhưng ở trên là các thuộc tính mà mình nghĩ rằng bạn sẽ cần sử dụng nhiều nhất nên bạn cứ tập trung làm quen với các thuộc tính đó trước đó, Bài học này sẽ giúp các bạn thay đổi chiều rộng hoặc chiều cao của 0 bằng cách sử dụng thuộc tính 1 Constructortag {
background-size: giá trị;
}2 could bevalueVí dụMô tảbackground-size. 100px;Xác định chiều rộng theo đơn vị, chiều cao sẽ tự động điều chỉnh theo Tỷ lệ. kích thước nền. 100px 50px;Xác định chiều rộng và chiều cao cho vùng nền theo đơn vị. kích thước nền. 50%;Xác định chiều rộng theo % của nội dung bao bên ngoài, chiều cao sẽ tự động điều chỉnh theo Tỷ lệ. kích thước nền. 100% 50%;Xác định chiều rộng và chiều cao cho vùng nền theo % của nội dung bao bên ngoài. kích thước nền. che; Tự động chia tỷ lệ cho kích thước lớn nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung
Tự động chia tỷ lệ cho kích thước nhỏ nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung
Trong các giá trị trên, thì giá trị 0 thường được sử dụng nhiều nhất, sử dụng nhiều khi muốn nền đầy đủ theo kích thước của thành phần bao bên ngoài, VD sử dụng trong các trang có nền toàn màn hình cửa sổ Xem ví dụ dưới đây để hiểu rõ hơn về 1 Chuẩn bịviết HTML
viết CSS div {
background: url(images/img_sakura.jpg) no-repeat;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Show the browser when no background-size background-size 1 to sectionviết CSS div {
background: url(images/img_sakura.jpg) no-repeat;
background-size: 300px;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Show the browser Ta thấy chiều rộng của nền bây giờ là 300px, chiều cao được điều chỉnh theo tương ứng với Tỷ lệ ban đầu background-size 2 to sectionviết CSS div {
background: url(images/img_sakura.jpg) no-repeat;
background-size: 300px 150px;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Show the browser Ta thấy chiều rộng của nền bây giờ là 300px, chiều cao là 150px background-size theo phần trămviết CSS div {
background: url(images/img_sakura.jpg) no-repeat;
background-size: 50%;
border: 1px solid #000099;
height: 300px;
width: 500px;
}Show the browser Ta thấy chiều rộng của nền bây giờ là 50% của thành phần div, chiều cao điều chỉnh theo Tỷ lệ tương ứng background-size with value coverviết CSS ________số 8 Show the browser Ta thấy chiều rộng của nền bây giờ đã tự điều chỉnh toàn bộ thành phần div và chiều cao tự điều chỉnh theo Tương ứng tương ứng Nếu chiều cao nhiều hơn chiều rộng thì nền sẽ điều chỉnh theo chiều cao trước, sau đó sẽ tự điều chỉnh chiều rộng cho phù hợp Do đó, 2 thường được sử dụng trong trường hợp chiều rộng của thành phần chứa nền có thể thay đổi tùy chọn được |
