background-clip cho phép bạn kiểm soát khoảng cách hình ảnh hoặc màu nền vượt ra ngoài phần đệm hoặc nội dung của phần tử.

Bạn đang xem : clip hình nền css

background-clip cho phép bạn kiểm soát mức độ ảnh nền hoặc màu vượt ra ngoài một phần tử đệm hoặc nội dung.

  .frame {
  background-clip: padding-box;
}  

Giá trị

  • border-box là giá trị mặc định. Điều này cho phép nền mở rộng đến mép ngoài của đường viền phần tử.
  • padding-box cắt nền ở mép ngoài của phần đệm của phần tử và không để nó kéo dài đến viền.
  • content-box cắt nền ở rìa hộp nội dung.
  • inherit áp dụng cài đặt background-clip của phần tử gốc cho phần tử đã chọn.

Bản trình diễn

background-clip được giải thích tốt nhất về thực tế, vì vậy chúng tôi đã tập hợp hai bản trình diễn để cho thấy cách hoạt động của nó.

Trong bản trình diễn đầu tiên, mỗi div có một đoạn bên trong nó. Đoạn văn là nội dung của div. Mỗi div có nền màu vàng và đường viền màu xanh lam nhạt bán trong suốt 5 pixel.

Dự phòng nhúng CodePen

Theo mặc định, hoặc với background-clip: border-box được đặt, nền màu vàng kéo dài đến tận mép ngoài của đường viền. Lưu ý rằng đường viền trông giống như màu xanh lục vì nền màu vàng bên dưới nó.

Khi background-clip được thay đổi thành padding-box , màu nền sẽ dừng ở nơi kết thúc phần đệm của phần tử. Lưu ý rằng đường viền có màu xanh lam vì nền không được phép tràn vào đường viền.

Với background-clip: content-box , màu nền chỉ tự áp dụng cho nội dung của div, trong trường hợp này là phần tử đoạn đơn. Phần đệm và đường viền của div không có màu nền. Tuy nhiên, có một chi tiết nhỏ đáng đề cập: màu sắc không mở rộng ra lề của nội dung. Kiểm tra sự khác biệt giữa ví dụ đầu tiên và ví dụ thứ hai với content-box .

Trong ví dụ content-box đầu tiên, lề mặc định của trình duyệt được áp dụng cho đoạn văn và các đoạn nền sau lề. Trong ví dụ thứ hai, lề được đặt thành 0 trong CSS và nền được cắt ở cạnh văn bản.

Xem Thêm  Chức năng và kiểu dữ liệu ngày và giờ - SQL Server (Transact-SQL) - ngày và giờ tính bằng sql

Tương tác tiếp theo này hiển thị background-clip với hình nền. Nội dung trong bản trình diễn này là một div trống nhỏ hơn.

Dự phòng nhúng CodePen

Bản trình diễn này cũng áp dụng background-size: cover background-repeat: no-repeat ngoài background-clip để kiểm soát hình nền, nếu không sẽ lặp lại cho đến khi cắt bớt.

Văn bản

Có một phiên bản có tiền tố của nhà cung cấp của phiên bản này hoạt động để cắt nền thành văn bản. Để thấy được tác phẩm đó, văn bản cũng cần phải minh bạch. May mắn thay, có một thuộc tính màu văn bản có tiền tố nhà cung cấp khác có thể ghi đè hiệu quả color , giúp an toàn khi sử dụng vì nó có thể có dự phòng:

  .background-clip-text {
  
  / * nếu chúng ta có thể làm clip, hãy làm điều đó * /
  -webkit-text-fill-color: trong suốt;
  -webkit-background-clip: text;

  / * những gì sẽ hiển thị qua văn bản
      ~ hoặc ~
     cái gì sẽ là nền của phần tử đó * /
  lý lịch: gì cũng được;

  / * màu văn bản dự phòng
      ~ hoặc ~
     màu thực của văn bản, vì vậy nó hoạt động tốt hơn trên nền * /
  màu đỏ;
 
}  

Firefox, Chrome và Safari hỗ trợ điều này.

Dự phòng nhúng CodePen

Hỗ trợ trình duyệt

IEEdgeFirefoxChromeSafariOpera9 + 12 + 22 + 21 + 5.1 + 15 +

iOS Safari Android ChromeAndroid FirefoxAndroid BrowserOpera MobileAllAllAll3 + 62 + Nguồn: caniuse

Thông tin thêm

Thuộc tính liên quan


Xem thêm những thông tin liên quan đến chủ đề clip ảnh nền css

Clip image to text using CSS background-clip | CSS Text Knockout Effect

  • Tác giả: smashtheshell
  • Ngày đăng: 2019-12-14
  • Đánh giá: 4 ⭐ ( 7651 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Clip image to text using CSS background-clip | CSS Text Knockout Effect

    We are going to create a css text knockout effect in which we will be clipping an image inside the text. So image background will be used as the text background.

    So you’ll learn how easy it is to clip a background image using css with the help of ‘background-clip: text’ and we will be using the text-fill-color property to make the text transparent so that we can see the actual image.

    We are going to see how we can combine css background-clip property along with text-fill-color property to create this very interesting text knockout effect.

    =====================SOURCE CODE========================
    Image clipping inside text source code codepen link:
    http://bit.ly/2LSVLVO

    =======================Useful Tutorials=====================

    Creating a stitched border look with css\r

    https://youtu.be/EQnfqxm7_yc\r

    Creating Multiple borders effect using CSS\r

    https://goo.gl/UbVmwR\r

    \r

    Creating Multilevel horizontal Navigation Bar using Flexbox\r

    https://goo.gl/Erkzp6\r

    \r

    Creating Simple Responsive Horizontal Menu using CSS3 Flex\r

    https://goo.gl/8efLMN\r

    \r

    Creating a Masonry Layout Using Pure CSS3\r

    https://goo.gl/QFNVJa\r

    \r

    Creating a Custom Select Box Element\r

    https://goo.gl/uj46tI\r

    \r

    How to create simple css3 preloading animation\r

    https://goo.gl/GqjXCr\r

    \r

    How to add preloader to your web page using javascript\r

    https://goo.gl/ZugNcP

Ảnh Nền trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 8142 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách thiết lập ảnh nền cho phần tử HTML trong CSS thông qua sử dụng thuộc tính background-image kèm theo ví dụ và source code mẫu minh hoạ.

Tạo hình cho background image với CSS Clip-path

  • Tác giả: howkteam.vn
  • Đánh giá: 3 ⭐ ( 3526 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo hình cho background image với CSS Clip-path

9 cách sử dụng background (nền) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 3142 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thiết lập hình nền trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 8493 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền …

Hướng dẫn màu nền và ảnh nền (background)

  • Tác giả: thachpham.com
  • Đánh giá: 4 ⭐ ( 9141 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn sử dụng các thuộc tính background trong CSS để thêm màu nền và ảnh nền,thiết lập vị trí với background-position,tùy chỉnh lặp với background-repeat

[Học CSS] Màu nền và Ảnh nền (background)

  • Tác giả: brandee.edu.vn
  • Đánh giá: 5 ⭐ ( 1443 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này thuộc phần 13 của 26 phần trong serie Học CSS cơ bảnContents1.Màu nền với background-color2.Ảnh nền với background-image2.1.Tùy chỉnh lặp lại ảnh nền với background-repeat2.2.Đổi vị trí ảnh nền với background-position3.Lời kết3.1.Xem tiếp bài trong serie4.Bài liên quanTạm gác qua các khái niệm về Box Model qua một bên mà ở phần này […]

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Phương thức mở cửa sổ JavaScript - javascript mở cửa sổ trình duyệt

By ads_php