Tất tần tật về thuộc tính background-image, cách sử dụng thuộc tính background

     

background-color

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

Bạn đang xem: Tất tần tật về thuộc tính background-image, cách sử dụng thuộc tính background

background-image

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

Xem thêm: Cách Đưa Trang Web Lên Mạng, Tạo Trang Web Đơn Giản Và Đưa Lên Internet

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ý giá phần trăm, chúng ta cũng 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ệ tỷ lệ giá trị được tính toán liên quan đến size 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 dùng để kiểm soát hình nền liên quan đến các cơ thể và các thành phần. Nó có bố giá trị là: fixec, local, scroll.Fixed nghĩa là hình hình ảnh nền được cố định vào khung nhìn và ko di chuyển, trong cả khi người tiêu dùng đang di chuyển dọc theo khung.Local là ảnh nền nên được cố định vào vị trí của nó trong phần tử. Nếu thành phần có một cơ chế dịch rời và ảnh 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 có nghĩa là các hình nền cố định và thắt chặt và sẽ không dịch chuyển 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ự kết phù hợp với thuộc tính background-origin, xác định nơi những vị trí bắt đầu cho ảnh trên nền nên được. Đó là giá chỉ trị hoàn toàn có thể là một từ bỏ khóa, chiều dài, hoặc một tỷ lệ 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 bao gồm sẵn: top, right, bottom, left với center. Bạn có thể sử dụng các từ khóa trong bất kỳ sự kết hợp, với nếu chỉ tất cả 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 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 định vị 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ố 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 ví dụ trong đó diện tích các mô hình hộp hình nền phải được sắp xếp theo.Giá trị mang định là border-box, khi nhưng mà vị trí hình ảnh ở gần cạnh viền của khung, padding-box khi nhưng mà hình ảnh ở vào viền của khung với content-box khi 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: đứ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 khẳng định khu vực sơn nền, kia là quanh vùng mà nền rất có thể sơn lên, 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: 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*/

*


Chuyên mục: Domain Hosting