background-color

thuộc tính background-color dùng để làm đặt color nền cho 1 thành phần. Nó đồng ý tất cả giá chỉ trị những mã color hoặc ở trong 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 những ô được khẳng định bởi ở trong tính background-clip. Trường hợp có ảnh nền được đặt cùng thì lớp màu sẽ tiến hành đặt sống dưới. Không hệt như các lớp hình ảnh có thể áp dụng nhiều lớp, chúng chỉ có thể dùng được một lớp màu cho 1 thành phần.

Bạn đang xem: Thuộc tính background-image trong css

background-image

Thuộc tính background-image có mang cho nền game của một thành phần. Nó là giá trị được định nghĩa bởi một đường dẫn hình ảnh với ký kết hiệu url(). Cực hiếm non hoàn toàn có thể được sử dụng, nó được tính là 1 trong những 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 những hình nền, mỗi giá trị được giải pháp nhau vì một vệt phẩy. Mỗi hình hình ảnh tiếp theo sẽ tiến hành đặ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 điều hành và kiểm soát cách hình nền sau thời điểm nó được đặt size (bởi ở trong tính background-size) và vị trí (bởi trực thuộc tính background-position).Giá trị của của ở trong tính này rất có thể là trong những từ khóa sau: repeat-x, repeat-y, repeat, space, round, no-repeat. Cạnh bên hai thuộc tính repeat-x cùng repeat-y, các giá trị khác rất có thể được tư tưởng một lần cho cả hai trục x cùng trục y hoặc mỗi chiều riêng rẽ 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 form size của hình nền. Quý giá của nó có thể là form size chiều dài cùng rộng hoặc là tỉ lệ phần trăm.Từ khóa 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 để phù hợp với khung. Giá trị cover, ở 1 mặt khác nó sẽ kéo dài hình ảnh sao cho đủ với khung nhưng ko gây sai lệch tỉ lệ.

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ũng có thể xác định cả chiều rộng và độ cao của hình ảnh nền. Tỷ lệ tỷ lệ giá trị được giám sát và đo lường liên quan đến kích 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 dùng để kiểm soát điều hành hình nền liên quan đến các cơ thể và những 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à thắt chặt vào khung chú ý và không di chuyển, ngay cả khi người tiêu dùng đang di chuyển dọc theo khung.Local là hình nền nên được cố định và thắt chặt vào vị trí của chính nó trong phần tử. Nếu bộ phận có một cơ chế dịch chuyển và nền game được ném lên hàng đầu, khi người dùng cuộn xuống phần tử, hình nền sẽ di chuyển ra ngoài tầm nhìn.Scroll có nghĩa là các hình nền cố định và thắt chặt và đang 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ước đầu cho ảnh trên nền nên được. Đó là giá bán trị hoàn toàn có thể là một tự khóa, chiều dài, hoặc một phần trăm phần trăm, và shop chúng tôi có thể xác định vị trí dọc theo trục x tương tự như các trục y.Từ khóa có sẵn: top, right, bottom, left với center. Bạn cũng có thể sử dụng các từ khóa trong bất kỳ sự kết hợp, cùng nếu chỉ có một từ bỏ 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 và tỷ lệ phần trăm giá trị, bọn họ cũng có thể xác xác định trí dọc theo trục x với trục y. Tỷ lệ tỷ lệ giá trị là tương quan đến các yếu tố bao gồm chứa.

Xem thêm: Hàm Số Bậc Nhất Và Các Bài Tập Đồ Thị Hàm Số Lớp 9, Chuyên Đề Hàm Số Và Đồ Thị Ôn Thi Vào Lớp 10

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 cụ thể trong đó diện tích các quy mô hộp ảnh trên nền phải được bố trí theo.Giá trị khoác định là border-box, khi nhưng mà vị trí hình ảnh ở gần kề viền của khung, padding-box khi mà lại hình ảnh ở vào viền của khung cùng content-box khi cơ mà hình ảnh ở vào 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 khẳng định khu vực đánh 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 vào các nghành nghề dịch vụ mô hình hộp.

vd:.left background-clip: border-box; background-size: 50%; background-color: #ffdb3a; background-repeat: no-repeat; background-position: đứng đầu 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*/

*