background-color

thuộc tính background-color dùng để đặt màu nền cho 1 thành phần. Nó gật đầu đồng ý tất cả giá chỉ trị các mã màu sắc hoặc trực thuộc tính transparent

vd:.left background-color: #ffdb3a; .middle background-color: #67b3dd; .right background-color: transparent;

*
Màu nền được xác định trong những ô được xác minh bởi trực thuộc tính background-clip. Ví như có hình nền được đặt thuộc thì lớp màu sẽ tiến hành đặt sinh sống dưới. Không y hệt như các lớp hình hình ảnh có thể sử dụng nhiều lớp, chúng chỉ rất có thể dùng được một tờ màu cho một thành phần.

Bạn đang xem: Background-size cover là gì

background-image

Thuộc tính background-image định nghĩa cho ảnh nền của một thành phần. Nó là cực hiếm được định nghĩa bởi một đường dẫn hình hình ảnh với ký hiệu url(). Cực hiếm non hoàn toàn có thể được sử dụng, nó được tính là 1 lớp.

vd:.left background-image: url("ire.png"); .right background-image: none;

*
Chúng ta hoàn toàn có thể sử dụng nhiều hình nền, mỗi cực hiếm được cách nhau vị một vệt phẩy. Từng hình hình ảnh tiếp theo sẽ được đặt trước trên trục z.

vd:.middle background-image: url("khaled.png"), url("ire.png"); /* Other styles */ background-repeat: no-repeat; background-size: 100px;

*

background-repeat

Thuộc tính background-repeat kiểm soát điều hành cách hình nền sau thời điểm nó được đặt kích thước (bởi nằm trong tính background-size) và vị trí (bởi trực thuộc tính background-position). Quý hiếm của của trực thuộc tính này có thể là một trong những từ khóa sau: repeat-x, repeat-y, repeat, space, round, no-repeat. Bên cạnh hai thuộc tính repeat-x cùng repeat-y, những giá trị khác rất có thể được quan niệm một lần cho tất cả hai trục x cùng trục y hoặc từng chiều riêng biệt biệt.

vd: .top-outer-left background-repeat: repeat-x; .top-inner-left background-repeat: repeat-y; .top-inner-right background-repeat: repeat; .top-outer-right background-repeat: space; .bottom-outer-left background-repeat: round; .bottom-inner-left background-repeat: no-repeat; .bottom-inner-right background-repeat: space repeat; .bottom-outer-right background-repeat: round space;

*

background-size

Thuộc tính background-size định nghĩa kích thước của hình nền. Quý hiếm của nó rất có thể là form size chiều dài cùng rộng hoặc là tỉ lệ phần trăm. Từ bỏ khóa tất cả sẵn mang lại thuộc tính là contain cùng cover. Quý hiếm contain sẽ co dãn đàn hồi hình ảnh để tương xứng với khung. Cực hiếm cover, ở 1 mặt không giống nó sẽ kéo dãn hình hình ảnh sao cho đủ với khung mà ko gây xô lệch tỉ lệ.

Xem thêm: Phím Tắt Ẩn Vệ Thạch Là Gì ? Tên Là Gì? Đáp Án Trắc Nghiệm Bns

vd: .left background-size: contain; background-image: url("ire.png"); background-repeat: no-repeat;.right background-size: cover; /* Other styles same as .left */

*
Đối với những giá trị chiều lâu năm và quý giá phần trăm, chúng ta có thể xác định cả chiều rộng lớn và chiều cao của ảnh nền. Tỷ lệ phần trăm giá trị được thống kê giám sát liên quan liêu đến kích thước của phần tử.

vd:.left background-size: 50px; /* Other styles same as .left */ .right background-size: 50% 80%; /* Other styles same as .left */

*

background-attachment

Thuộc tính background-attachment cần sử dụng để điều hành và kiểm soát hình nền liên quan đến các khung hình và các thành phần. Nó có bố giá trị là: fixec, local, scroll. Fixed nghĩa là hình ảnh nền được cố định vào khung chú ý và ko di chuyển, trong cả khi người dùng đang dịch rời dọc theo khung. Local là nền game nên được cố định vào vị trí của nó trong phần tử. Nếu bộ phận có một cơ chế dịch chuyển và nền game được bỏ lên trên hàng đầu, khi người tiêu dùng cuộn xuống phần tử, ảnh nền sẽ dịch chuyển ra khỏi tầm nhìn. Scroll có nghĩa là các hình nền cố định và đã không dịch rời ngay cả với những nội dung của các bộ phận của nó.

vd:.left background-attachment: fixed; background-size: 50%; background-image: url("ire.png"); background-repeat: no-repeat; overflow: scroll;.middle background-attachment: local; /* Other styles same as .left */ .right background-attachment: scroll; /* Other styles same as .left */

*

background-position

Thuộc tính này là việc kết hợp với thuộc tính background-origin, xác định nơi các vị trí ban đầu cho màn hình nên được. Đó là giá bán trị rất có thể là một từ bỏ khóa, chiều dài, hoặc một phần trăm phần trăm, và cửa hàng chúng tôi có thể xác định vị trí dọc từ trục x cũng như các trục y. Tự khóa gồm sẵn: top, right, bottom, left và center. Chúng ta có thể sử dụng các từ khóa trong bất kỳ sự kết hợp, với nếu chỉ gồm một từ khóa được quy định.

vd:.top-left background-position: top; background-size: 50%; background-image: url("ire.png"); background-repeat: no-repeat;.top-middle background-position: right; /* Other styles same as .top-left */ .top-right background-position: bottom; /* Other styles same as .top-left */ .bottom-left background-position: left; /* Other styles same as .top-left */ .bottom-right background-position: center; /* Other styles same as .top-left */

*
Đối cùng với chiều dài cùng tỷ lệ tỷ lệ giá trị, chúng ta cũng có thể xác xác định trí dọc theo trục x cùng trục y. Tỷ lệ tỷ lệ giá trị là tương quan đến các yếu tố gồm chứa.

vd:.left background-position: 20px 70px; /* Others same as .top-left */ .right background-position: 50%; /* Others same as .top-left */

*

background-origin

Thuộc tính background-origin quy định ví dụ trong đó diện tích s các mô hình hộp ảnh trên nền phải được bố trí theo. Quý giá mặc định là border-box, khi nhưng mà vị trí hình ảnh ở liền kề viền của khung, padding-box khi mà lại hình hình ảnh ở vào viền của khung với content-box khi nhưng mà hình hình ảnh ở trong khung

vd: .left background-origin: border-box; background-size: 50%; background-image: url("ire.png"); background-repeat: no-repeat; background-position: đứng đầu left; border: 10px dotted black; padding: 20px;.middle background-origin: padding-box; /* Other styles same as .left*/ .right background-origin: content-box; /* Other styles same as .left*/

*

background-clip

Thuộc tính background-clip xác định khu vực đánh nền, đó là quanh vùng mà nền có thể sơn lên, giống như background-origin, nó được dựa vào các nghành mô hình hộp.

vd:.left background-clip: border-box; background-size: 50%; background-color: #ffdb3a; background-repeat: no-repeat; background-position: đứng top left; border: 10px dotted black; padding: 20px;.middle background-clip: padding-box; /* Other styles same as .left*/ .right background-clip: content-box; /* Other styles same as .left*/

*