THUỘC TÍNH BACKGROUND-IMAGE

  -  

background-color

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

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

background-image

Thuộc tính background-image quan niệm cho ảnh trên 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 ảnh với ký hiệu url(). Giá trị non 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 rất có thể sử dụng những hình nền, mỗi cực hiếm được bí quyết nhau do một vết phẩy. Mỗi 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 điều hành và kiểm soát cách hình nền sau khi nó được đặt kích thước (bởi ở trong tính background-size) với vị trí (bởi thuộc tính background-position).Giá trị của của nằm trong tính này rất có thể là một trong 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 tư tưởng một lần cho cả hai trục x cùng 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. Cực hiếm của nó hoàn toàn có thể là size chiều dài và rộng hay là tỉ lệ phần trăm.Từ khóa tất cả sẵn mang lại thuộc tính là contain với cover. Quý giá contain sẽ đàn hồi hình ảnh để phù hợp 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ừa với khung cơ mà ko gây xô lệch tỉ lệ.

Xem thêm: Những Phần Mềm Sửa Lỗi Win 7 Tốt Và, Phần Mềm Fixwin Sửa Lỗi Win 7 Tốt Và

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

vd:.left background-size: 50px; /* Other styles same as .left */ .right background-size: 1/2 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 tương quan đến các cơ thể và các thành phần. Nó có cha giá trị là: fixec, local, scroll.Fixed tức thị hình ảnh nền được thắt chặt và cố định vào khung nhìn và không di chuyển, ngay cả khi người dùng đang dịch rời dọc theo khung.Local là ảnh nền nên được cố định và thắt chặt vào vị trí của nó trong phần tử. Nếu phần tử có một cơ chế dịch rời và ảnh trên nền được đặt lên trên hàng đầu, khi người dùng cuộn xuống phần tử, màn hình sẽ dịch rời ra ngoài tầm nhìn.Scroll tức là các hình nền cố định và sẽ không dịch rời ngay cả với những nội dung của các phần tử 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, khẳng định nơi các vị trí ban đầu cho màn hình nên được. Đó là giá chỉ trị có thể là một từ khóa, chiều dài, hoặc một tỷ lệ phần trăm, và công ty chúng tôi có thể xác định vị trí dọc theo trục x cũng tương tự các trục y.Từ khóa gồm sẵn: top, right, bottom, left cùng 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ỉ tất 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 với chiều dài với tỷ lệ phần trăm giá trị, họ cũng có thể xác định vị trí dọc theo trục x cùng trục y. Tỷ lệ phần trăm giá trị là liên quan đến các yếu tố gồm chứa.

Xem thêm: Nộp Tiền Vào Tài Khoản Paypal Tại Việt Nam, Chuyển Tiền Vào Paypal

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 quy mô hộp hình nền phải được sắp xếp theo.Giá trị khoác định là border-box, khi cơ mà vị trí hình ảnh ở gần kề viền của khung, padding-box khi nhưng mà hình ảnh ở trong viền của khung với content-box khi nhưng mà hình 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: top 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 đánh nền, đó là khoanh vùng mà nền rất có thể sơn lên, hệt 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: vị trí cao nhất 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*/

*