Hình-ảnh-ngưỡng - Thủ thuật CSS

shape-image-thresholdThuộc tính CSS đặt pixel nào được bao gồm trong hình dạng của hình ảnh khi shape-outsideđược sử dụng để xác định vùng nổi của phần tử CSS.

Giả sử chúng ta đang sử dụng một gradient tuyến tính để xác định vùng nổi của một hình dạng CSS. Một cái gì đó như thế này khi chúng ta chuyển từ một màu đồng nhất sang trong suốt ở một góc 45 °:

Thông thường, chúng tôi định nghĩa đó là background-imagemột phần tử. Nếu chúng ta thả nổi phần tử này và thả một số nội dung bên cạnh nó, thì gradient và nội dung sẽ nằm cạnh nhau.

Nhưng nếu chúng ta trao đổi background-imagecho shape-outside, chúng tôi sẽ không còn thấy gradient, nhưng kết thúc tốt đẹp nội dung xung quanh nó nơi các điểm ảnh trong gradient là minh bạch.

Nhưng giả sử chúng tôi nghĩ rằng văn bản cần ôm sát hình dạng hơn một chút. Đó là nơi chúng ta có thể đạt được shape-image-threshold. Chúng tôi có thể sử dụng nó để điều chỉnh vị trí nội dung bao bọc tự nhiên xung quanh các pixel trong suốt bằng cách bao gồm các pixel nửa trong suốt. Ví dụ: shape-image-thresholdgiá trị .3 sẽ bao gồm các pixel mờ hơn 30% trong vùng nổi của hình dạng.

Lần này, chúng tôi sẽ bao gồm gradient để xem nó hoạt động như thế nào.

Thấy chưa? Bằng cách khai báo shape-image-thresholdtrên hình dạng thứ hai và đặt nó thành giá trị .15, chúng tôi đã bao gồm các pixel có độ mờ đục lớn hơn 15% trong vùng nổi, cho phép nội dung chồng lên hình dạng một smidge.

Điều này cũng hoạt động khi chúng tôi xác định hình dạng bên ngoài bằng tệp hình ảnh thực tế sử dụng độ trong suốt. Cùng một thỏa thuận, chỉ là một hình dạng khác để làm việc.

Cú pháp

.logo ( shape-outside: url(/path/to/image.png.webp); shape-image-threshold: .6; )

Áp dụng cho: float
Kế thừa: không
Giá trị ban đầu: 0.0
Loại hoạt ảnh: số

Giá trị

Các shape-image-thresholdbất động sản chấp nhận một giá trị alpha duy nhất giữa 0 và 1, trong đó 0 là tương đương với một mức opacity là 0% (đầy đủ trong suốt) và 1 là tương đương với một mức opacity 100% (không tính minh bạch). Giá trị ban đầu là 0,0.