सीएसएस ग्रेडियेंट को चिकनी दिखने के लिए कैसे करें? मैंने पाया <a href="https://i.stack.imgur.com/SAuO4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SAuO4.png" alt="enter image description here"></a> एक ही रास्ता:

मैं एक काले रंग की पृष्ठभूमि है और पारदर्शी से 0.7 सफेद करने के लिए सरल सीएसएस ढाल के साथ अंदर एक ब्लॉक जोड़ना चाहते हैं:सीएसएस ग्रेडियेंट को चिकनी दिखने के लिए कैसे करें? मैंने पाया <a href="https://i.stack.imgur.com/SAuO4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SAuO4.png" alt="enter image description here"></a> एक ही रास्ता:

linear-gradient(to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.76) 14%, 
    hsla(0, 0%, 100%, 0.76) 
)

लेकिन यह बुरा लग रहा है मैन्युअल रूप से अतिरिक्त रंग स्टॉप जोड़ने के लिए है।

background: linear-gradient(
    to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.05) 2%, 
    hsla(0, 0%, 100%, 0.09) 3%, 
    hsla(0, 0%, 100%, 0.2) 5%, 
    hsla(0, 0%, 100%, 0.57) 11.5%, 
    hsla(0, 0%, 100%, 0.69) 14%, 
    hsla(0, 0%, 100%, 0.75) 16.5%, 
    hsla(0, 0%, 100%, 0.76) 17.5%, 
    hsla(0, 0%, 100%, 0.77) 
);

और यह ज्यादा बेहतर लग रहा है:

The comparsion demonstration on CodePen

वहाँ सीएसएस ढाल रंग बंद हो जाता है पर चिकनी बनाने के लिए एक आसान तरीका है?

स्रोत

2016-12-28 Даниил Пронин

आप इस पोस्ट को देख सकते हैं: http://stackoverflow.com/questions/13151331/smooth-css-gradients –

मैंने अपना खुद का प्रश्न बनाने से पहले इसे पहले ही पढ़ा है। उस प्रश्न में कोई समाधान नहीं है। चुना गया जवाब सिर्फ 0 और 100% को छोड़कर रंग-स्टॉप का उपयोग न करने का सुझाव है। मैं इस समस्या को हल करना चाहता हूं, कामकाज नहीं। –

मुझे डर नहीं है, लेकिन आप इन उदाहरणों से मूल सेटिंग्स का उपयोग कर सकते हैं http://codepen.io/taylorvowell/pen/BkxbC – Roberrrt

एक दिन, मुझे आशा है कि, हम इस मिल गया है:

PostCSS प्लगइन: https://github.com/larsenwork/postcss-easing-gradients
```
linear-gradient(
    to top, 
    hsla(330, 100%, 45%, 0), 
    cubic-bezier(0.45, 0, 0.5, 0.5), 
    hsla(330, 100%, 45%, 1) 
); 
```
बॉट अब के लिए, हम इस राशि एक ऐप आपको एक आसान कार्य चुनने के लिए आवंटित करता है: https://larsenwork.com/easing-gradients/

स्रोत

2018-02-05 12:04:04

मैंने अभी तक पूरी तरह से समझ नहीं लिया है कि आप क्या करना चाहते हैं, लेकिन जहां तक मुझे यह मिला कि आप इसे काले रंग की पृष्ठभूमि पर एक बॉक्स को पारदर्शी से बाईं ओर एक ढाल के साथ जोड़ना चाहते हैं (फिर भी काला) 0.7 पारदर्शिता या # C2C2C2 के साथ सफेद करने के लिए। यदि आप यही करना चाहते हैं, तो मैं एचएसएल (मूल रंग सिद्धांत के कारण) का उपयोग नहीं करता बल्कि बल्कि आरजीबीए का उपयोग नहीं करता।

इस की जाँच करें:

<html> 
<head> 
<style> 
#blackbg { 
background-color: black; 
height: 300px; 
} 

#grad1 { 
    height: 200px; 
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 255, 255, 0.7)); 
} 
</style> 
</head> 
<body>

यदि यह नहीं था कि आप क्या करने का इरादा या आप अभी भी कुछ के साथ अटक लग रहा है क्या, मुझे वापस पूछने के लिए स्वतंत्र महसूस हो रहा है।

<div id="blackbg"> 
<div id="grad1"></div> 
</div> 

</body> 
</html>

स्रोत

2016-12-28 08:56:15 codingunicorn

यूपीएस लगता है जैसे कोड विभाजित हो गया है ... – codingunicorn

मैं इसे छवि स्लाइडर के साथ अपने स्लाइडर पर एक टेक्स्ट पृष्ठभूमि के रूप में जोड़ना चाहता हूं। यह अंधेरे या हल्के हो सकता है, लोगों के डेस्कटॉप से वॉलपेपर की तरह कुछ भी। आप इसे http://eco-vpk.ru पर या इस स्क्रीनशॉट पर देख सकते हैं: http://imgur.com/a/73Ozc –

ठीक है, अब मुझे यह मिल गया है। लेकिन आप ढाल को कहां जोड़ना चाहते हैं? उत्पाद कहां है? क्या आप वीकेपी के लिए काम करते हैं या यह वह है जिसे आप हासिल करना चाहते हैं? – codingunicorn

उत्तर

संबंधित मुद्दे