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 nền cho 1 nhân tố. Nó gật đầu toàn bộ cực hiếm những mã color hoặc trực thuộc tính transparent
vd:.left background-color: #ffdb3a; .middle background-color: #67b3dd; .right background-color: transparent;
Bạn đang xem: Cách sử dụng thuộc tính background
background-image
Thuộc tính background-image quan niệm mang đến màn hình của một yếu tố. Nó là quý giá được có mang bởi một đường truyền hình hình ảnh cùng với ký hiệu url(). Giá trị non hoàn toàn có thể được sử dụng, nó được xem là 1 lớp.
vd:.left background-image: url("ire.png"); .right background-image: none;
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 bí quyết màn hình sau khoản thời gian nó được đặt kích thước (vày thuộc tính background-size) cùng địa chỉ (vị ở trong tính background-position).Giá trị của của thuộc tính này có thể là 1 trong những giữa những từ bỏ khóa sau: repeat-x, repeat-y, repeat, space, round, no-repeat. Bên cạnh nhị nằm trong tính repeat-x với repeat-y, những giá trị khác hoàn toàn có thể được có mang một lần cho tất cả nhị trục x với trục y hoặc mỗi chiều đơn nhấ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-form size có mang kích thước của ảnh nền. Giá trị của nó hoàn toàn có thể là kích thước chiều dài và rộng hay là tỉ trọng Phần Trăm.Từ khóa bao gồm sẵn đến trực thuộc tính là contain với cover. Giá trị contain vẫn đàn hồi hình ảnh để cân xứng cùng với size. giá trị cover, ở 1 còn mặt khác nó sẽ kéo dài hình ảnh thế nào cho vừa với form nhưng ko gây sai lệch tỉ trọng.
Xem thêm: Download Font Đầy Đủ Nhất Và Cách Cài Đặt, Download Fonts
vd: .left background-size: contain; background-image: url("ire.png"); background-repeat: no-repeat;.right background-size: cover; /* Other styles same as .left */
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 làm điều hành và kiểm soát hình nền tương quan mang đến các cơ thể cùng những yếu tắc. Nó tất cả bố giá trị là: fixec, local, scroll.Fixed nghĩa là hình màn hình được cố định và thắt chặt vào form chú ý cùng không di chuyển, trong cả Lúc người dùng sẽ dịch rời dọc từ size.Local là nền game buộc phải được thắt chặt và cố định vào vị trí của nó trong thành phần. Nếu bộ phận tất cả một hiệ tượng dịch rời cùng hình nền được ném lên hàng đầu, khi người tiêu dùng cuộn xuống bộ phận, hình nền vẫn di chuyển thoát khỏi trung bình nhìn.Scroll Có nghĩa là những ảnh trên nền thắt chặt và cố định cùng sẽ không còn di chuyển ngay cả cùng với những câu chữ của những 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 định vị trí các địa điểm bước đầu mang lại ảnh trên nền đề xuất được. Đó là quý giá hoàn toàn có thể là 1 trong từ khóa, chiều lâu năm, hoặc một xác suất Tỷ Lệ, và Cửa Hàng chúng tôi có thể xác định vị trí dọc theo trục x cũng giống như các trục y.Từ khóa có sẵn: top, right, bottom, left với center. Chúng ta hoàn toàn có thể áp dụng các tự khóa trong bất kỳ sự kết hợp, với nếu như chỉ tất cả một trường đoản cú khóa được nguyên lý.
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 */
Xem thêm: Tải Lại Facebook Cũ Hơn - Hướng Dẫn Trở Về Giao Diện Facebook Cũ
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 khí cụ rõ ràng trong những số đó diện tích S các quy mô hộp hình nền bắt buộc được bố trí theo.Giá trị khoác định là border-box, Lúc mà lại vị trí hình hình ảnh nghỉ ngơi gần kề viền của size, padding-box Lúc mà lại hình hình họa ngơi nghỉ trong viền của khung cùng content-box khi nhưng hình hình họa ngơi nghỉ trong 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 định Khu Vực đánh nền, đó là khoanh vùng mà lại nền rất có thể đánh lên, y hệt như background-origin, nó được dựa trên các nghành nghề quy mô vỏ 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*/
