आकार-छवि-दहलीज - सीएसएस-ट्रिक्स

CSS shape-image-thresholdप्रॉपर्टी सेट करती है कि कौन सी पिक्सेल्स इमेज के शेप में शामिल हैं जब shape-outsideइसका इस्तेमाल CSS एलिमेंट के फ्लोट एरिया को डिफाइन करने के लिए किया जाता है।

मान लें कि हम सीएसएस आकार के फ्लोट क्षेत्र को परिभाषित करने के लिए एक रैखिक ढाल का उपयोग कर रहे हैं। ऐसा कुछ जहां हम एक ठोस रंग से पारदर्शी होकर 45 ° के कोण पर जाते हैं:

आम तौर पर, हम इसे background-imageएक तत्व के रूप में परिभाषित करेंगे । यदि हम इस तत्व को तैरते हैं और इसके बगल में कुछ सामग्री छोड़ते हैं, तो ढाल और सामग्री अगल-बगल बैठती हैं।

लेकिन अगर हम अदला-बदली background-imageकरते हैं shape-outside, तो हम अब ढाल नहीं देखेंगे, लेकिन सामग्री इसके चारों ओर घूमती है जहां ग्रेडिएंट में पिक्सेल पारदर्शी होते हैं।

लेकिन मान लें कि हमें लगता है कि पाठ को आकार को थोड़ा और करीब ले जाने की जरूरत है। यहीं से हम पहुंच सकते हैं shape-image-threshold। हम इसे समायोजित करने के लिए उपयोग कर सकते हैं जहां सामग्री स्वाभाविक रूप से पारदर्शी पिक्सेल के चारों ओर लपेटती है जिसमें पिक्सेल शामिल होते हैं जो अर्ध-पारदर्शी होते हैं। उदाहरण के लिए, shape-image-threshold.3 के मान में पिक्सेल शामिल होंगे जो आकार के फ्लोट क्षेत्र में 30% से अधिक अपारदर्शी हैं।

इस बार, हम यह देखने के लिए ढाल को शामिल करेंगे कि यह कैसे काम करता है।

देखना है कि? shape-image-thresholdदूसरे आकार पर घोषणा करके और इसे .15 के मान पर सेट करके, हमने ऐसे पिक्सेल शामिल किए हैं जो फ्लोट क्षेत्र में 15% से अधिक अपारदर्शी हैं, जिससे सामग्री को एक आकार को ओवरलैप करने की अनुमति मिलती है।

यह तब भी काम करता है जब हम बाहरी आकृति को एक वास्तविक छवि फ़ाइल के साथ परिभाषित कर रहे हैं जो पारदर्शिता का उपयोग करती है। एक ही सौदा, बस एक अलग आकार के साथ काम करने के लिए।

वाक्य - विन्यास

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

पर लागू होता है: तैरता है
इन्हेरिट किया: नहीं
प्रारंभिक मूल्य: 0.0
एनीमेशन प्रकार: संख्या

मूल्यों

shape-image-thresholdसंपत्ति 0 और 1, जहां 0 0% की अस्पष्टता के स्तर के बराबर है के बीच एक अल्फा मूल्य (पूरी तरह से पारदर्शी) और 1 100% (कोई पारदर्शिता) के एक अस्पष्टता स्तर के बराबर है स्वीकार करता है। प्रारंभिक मान 0.0 है।