Đầu năm nay, WebKit đã cập nhật hành vi của thuộc tính viết tắt background
CSS. Với thay đổi này, thuộc tính viết tắt background
sẽ đặt lại background-size
về giá trị mặc định là auto auto
nếu không được đặt trong phần khai báo viết tắt. Thay đổi này giúp Chrome và các trình duyệt WebKit khác tuân thủ thông số kỹ thuật và khớp với hành vi của Firefox, Opera và Internet Explorer.
Chrome dành cho Android đang chuyển sang các bản sửa đổi hiện tại trên WebKit, nên thay đổi này hiện đang được triển khai trên Android. Vì đây là bản sửa lỗi cho webkit, nên các trang web được kiểm thử trong nhiều trình duyệt có thể sẽ không bị ảnh hưởng.
Cách làm cũ
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
Thuộc tính viết tắt background
không chứa bất kỳ thuộc tính kích thước nào và do đó sẽ đặt lại background-size
về giá trị mặc định là auto auto
.
Cách chính xác để chỉ định kích thước hình ảnh
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
Trong fooB
, việc chỉ định background-size
trong viết tắt background
yêu cầu phải chỉ định position
(0%) trước, theo sau là dấu gạch chéo rồi đến background-size
(50px 40px).
Sửa lỗi cho mã hiện có
Có một số cách giúp bạn dễ dàng khắc phục vấn đề này:
- Sử dụng
background-image
thay vì thuộc tính viết tắtbackground
. - Đặt
background-size
ở cuối cùng, với mức độ cụ thể cao hơn bất kỳ quy tắc CSS nào khác đặtbackground
trên phần tử đó và đừng quên kiểm tra và quy tắc:hover
. - Áp dụng thuộc tính
!important
chobackground-size
. - Di chuyển thông tin về kích thước sang thuộc tính viết tắt
background
.
Bật mí thêm cho bạn: độ dời hình nền
Ngoài thay đổi này, giờ đây, bạn có thể linh hoạt hơn trong việc định vị hình ảnh trong nền. Trước đây, bạn chỉ có thể chỉ định vị trí hình ảnh tương ứng với góc trên cùng bên trái, giờ đây, bạn có thể chỉ định độ dời so với các cạnh của vùng chứa. Ví dụ: khi đặt background-position: right 5px bottom 5px;
, hình ảnh sẽ được đặt cách cạnh phải 5px và cách cuối 5px. Hãy xem mẫu này trên JSBin