background-color

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

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

*
Màu nền được khẳng định trong các ô được khẳng định bởi thuộc tính background-clip. Giả dụ có màn hình được đặt thuộc thì lớp màu sẽ tiến hành đặt sinh hoạt dưới. Không giống như các lớp hình ảnh có thể sử dụng nhiều lớp, bọn chúng chỉ có thể dùng được một tấm màu cho 1 thành phần.

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

background-image

Thuộc tính background-image khái niệm cho ảnh nền của một thành phần. Nó là quý giá được định nghĩa bởi một đường truyền hình hình ảnh với ký hiệu url(). Giá trị non có thể được sử dụng, nó được tính là 1 trong lớp.

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

*
Chúng ta rất có thể sử dụng những hình nền, mỗi quý hiếm được phương pháp nhau vì chưng một lốt phẩy. Mỗi hình ảnh tiếp theo sẽ tiến hành đặt trước bên 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 điều hành và kiểm soát cách hình nền sau khoản thời gian nó được đặt kích cỡ (bởi trực thuộc tính background-size) và vị trí (bởi thuộc tính background-position).Giá trị của của ở trong tính này rất có thể là trong số những từ khóa sau: repeat-x, repeat-y, repeat, space, round, no-repeat. Lân cận hai trực thuộc tính repeat-x cùng repeat-y, các giá trị khác hoàn toàn có thể được quan niệm một lần cho tất cả hai trục x với trục y hoặc từng chiều riêng 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à kích thước chiều dài và rộng hoặc là tỉ lệ phần trăm.Từ khóa có sẵn đến thuộc tính là contain với cover. Quý hiếm contain sẽ đàn hồi hình ảnh để cân xứng với khung. Quý hiếm cover, tại một mặt khác nó sẽ kéo dãn hình ảnh sao cho đủ với khung mà lại ko gây rơi lệch tỉ lệ.

Xem thêm: Cách Tính Lương Hưu Từ Năm 2018 : Lao Động Nữ Bị Thiệt Thòi, Thay Đổi Cách Tính Lương Hưu Từ Năm 2018

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 các giá trị chiều nhiều năm và quý hiếm phần trăm, bạn có thể xác định cả chiều rộng và độ cao của ảnh nền. Tỷ lệ tỷ lệ giá trị được giám sát liên quan lại đến kích cỡ của phần tử.

vd:.left background-size: 50px; /* Other styles same as .left */ .right background-size: một nửa 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 người và những thành phần. Nó có bố giá trị là: fixec, local, scroll.Fixed tức thị hình hình ảnh nền được cố định vào khung nhìn và ko di chuyển, ngay cả khi người dùng đang di chuyển dọc theo khung.Local là hình nền nên được cố định vào vị trí của nó trong phần tử. Nếu phần tử có một cơ chế di chuyển và hình nền được để lên hàng đầu, khi người dùng cuộn xuống phần tử, hình nền sẽ dịch rời ra ngoài tầm nhìn.Scroll tức là các hình nền thắt chặt và cố định và sẽ 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à sự việc kết hợp với thuộc tính background-origin, xác minh nơi các vị trí bắt đầu cho màn hình nên được. Đó là giá trị hoàn toàn có thể là một tự khóa, chiều dài, hoặc một xác suất phần trăm, và 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 tất cả sẵn: top, right, bottom, left và center. Bạn cũng có thể sử dụng những từ khóa trong ngẫu nhiên sự kết hợp, với nếu chỉ gồm một trường đoản cú 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ị, bọn họ cũng rất có thể xác xác định trí dọc theo trục x với trục y. Tỷ lệ xác suất giá trị là liên quan đến các yếu tố tất cả 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 rõ ràng trong đó diện tích s các mô hình hộp ảnh trên nền phải được bố trí theo.Giá trị khoác định là border-box, khi mà lại vị trí hình ảnh ở sát viền của khung, padding-box khi mà hình ảnh ở vào viền của khung với content-box khi nhưng mà 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: vị trí cao nhất 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 minh khu vực tô nền, đó là khu vực mà nền rất có thể sơn lên, giống hệt như background-origin, nó được dựa trên các lĩnh vực 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*/

*