CSS background clip là gì?
The Show Show demo ❯ Default value:border-boxInherited:noAnimatable:no. Read about animatableVersion:CSS3JavaScript syntax:object.style.backgroundClip="content-box" Try it Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Propertybackground-clip4.09.04.03.010.5 CSS Syntaxbackground-clip: border-box|padding-box|content-box|initial|inherit; Property ValuesValueDescriptionDemoborder-boxDefault value. The background extends behind the borderDemo ❯padding-boxThe background extends to the inside edge of the borderDemo ❯content-boxThe background extends to the edge of the content boxDemo ❯initialSets this property to its default value. Read about initialinheritInherits this property from its parent element. Read about inherit Trong CSS3 hỗ trợ thêm một số tính năng mới để xử lý background, đó là những thuộc tính xử lý nâng cao hơn thuộc tính background thông thường. Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Bình thường nếu muốn có hai background nằm đè nhau thì ta phải sử dụng hai thẻ HTML, nhưng với CSS3 thì nó hỗ trợ multiple background (đa backgrouds). Chúng ta sẽ học những thuộc tính sau:
1. CSS3 Multiple backgroudsCSS3 cho phép thêm nhiều backgrounds cho một thẻ HTML bằng cách sử dụng thuộc tính background : url(link-to-file1.png), url(link-to-file2.png) ...;0. Bài viết này được đăng tại [free tuts .net] Nếu cú pháp của thuộc tính background là: background : url(link-to-file.png) Thì cú pháp của multiple background là: background : url(link-to-file1.png), url(link-to-file2.png) ...; Lúc này để thiết lập các thuộc tính cho từng image thì ta sử dụng cấu trúc như sau: background-position: top left, right bottom; background-repeat: no-repeat, no-repeat Nghĩa là dùng dấu phẩy để thiết lập cho từng background tương ứng ở trên. Ví dụ RUN div { width: 620px; height: 350px; background-image: url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png), url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg); background-position: center center, center center; background-repeat: no-repeat, no-repeat } Kết quả: Nếu bạn cảm thấy code trên dài dòng quá thì có thể sử dụng thuộc tính background : url(link-to-file1.png), url(link-to-file2.png) ...;1 như ví dụ sau: div { width: 620px; height: 350px; background: url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png) no-repeat center center, url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg) no-repeat center center; } Thay vài code CSS trên bạn sẽ thấy kết quả như nhau. 2. Cấu hình kích thước cho background (background-size)Thường thì chúng ta không thể thay đổi kích thước của background được nhưng với CSS3 thì hoàn toàn có thể bằng cách sử dụng thuộc tính background : url(link-to-file1.png), url(link-to-file2.png) ...;2. Ví dụ: div { width: 620px; height: 350px; background: url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/house.png) no-repeat center center, url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg) no-repeat center center; background-size: 200px 200px, 300px 300px; } Kết quả: Nếu chúng ta thiết lập kích thước cố định cho background như vậy thì không thể chạy tốt trong thiết kế responsive được vì responsive co giãn nên không có định chiều cao và chiều rộng. Lúc này ta sẽ lựa chọn sử dụng hai giá trị chuẩn sau đây:
Ví dụ cover: Ví dụ RUN div { width: 800px; height: 800px; background: url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg) no-repeat center center; background-size: cover; } Trong ví dụ này vì thẻ HTML lớn nên hình background nó kéo giãn ra cho khớp. Ví dụ contain: Ví dụ RUN div { width: 800px; height: 100px; border: solid 1px; background: url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/background.jpg) no-repeat center center; background-size: contain; } Trong ví dụ này thẻ HTML có chiều rộng dài và chiêu cao ngắn nên hình nó sẽ fix theo chiều cao, vì vậy chiều cao full mà chiều rộng thì không full. 3. Thuộc tính background-origin trong CSS3Thuộc tính background : url(link-to-file1.png), url(link-to-file2.png) ...;4 trong CSS3 dùng để xác đinh nơi mà background hình ảnh sẽ hiển thị. Nó có ba giá trị sau đây:
Xem hình mô tả sau để dễ hiểu hơn. Ví dụ RUN div{ width: 250px; height: 100px; margin: 20px auto; border: solid 20px; padding: 50px; background: url(https://freetuts.net/upload/tut_post/images/2015/10/23/478/hoa-hong-dep.gif) no-repeat top left; } #div1{ background-origin: border-box; } #div2{ background-origin: padding-box; } #div3{ background-origin: content-box; } 4. Thuộc tính background-clip trong CSS3Thuộc tính backgroud-clip trong CSS3 dùng để xác định nơi mà background color sẽ hiển thị. Nó có ba giá trị sau:
Như vậy công dụng của nó tương tự như background : url(link-to-file1.png), url(link-to-file2.png) ...;4 nhưng nó có tác dụng với background color còn background : url(link-to-file1.png), url(link-to-file2.png) ...;4 thì có tác dụng với background image. Ví dụ RUN div{ width: 250px; height: 100px; margin: 20px auto; border: dotted 10px; padding: 50px; background: blue; } #div1{ background-clip: border-box; } #div2{ background-clip: padding-box; } #div3{ background-clip: content-box; } 5. Lời kếtViệc xử lý multiple background là một tính năng khá hay trong CSS3 bởi nó giải quyết được vấn đề bổ sung thẻ HTML để tạo background. Bên cạnh đó các thuộc tính như background : url(link-to-file1.png), url(link-to-file2.png) ...;4 và background : url(link-to-file1.png), url(link-to-file2.png) ...;8 cũng giúp cho coder có nhiều sự lựa chọn hơn. Backgroundbackground-clip: padding-box; Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa padding (không bao gồm border). background-clip: border-box; Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa border.
BackgroundVùng tô nền - background-clip
Thuộc tính background-clip chỉ ra vùng vẽ của nền. Nó có thể nhận các giá trị: border-box mặc định, nền vẽ ngoài biên viền.
Background size CSS là gì?Thuộc tính background-size định nghĩa kích thước của hình nền. Giá trị của nó 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 cho thuộc tính là contain và cover. Giá trị contain sẽ co dãn hình ảnh để phù hợp với khung.
Background position là gì?Thuộc tính background-position : xác định vị trí hình ảnh nền cho thành phần. Được sử dụng kèm với giá trị background-image và background-repeat. background-position có các cặp giá trị như sau: background-position: left top; Hình nằm bên trái - phía trên thành phần (đây là dạng mặc định).
|