CSS3 की पारदर्शिता + ग्रेडिएंट

Question

RGBA बेहद मजेदार है, और इसलिए है -webkit-gradient, -moz-gradientऔर उह ... progid:DXImageTransform.Microsoft.gradient... हाँ। :)

क्या दो, RGBA और ग्रेडिएंट को मिलाने का एक तरीका है, ताकि वर्तमान / नवीनतम CSS स्पेक्स का उपयोग करके अल्फा ट्रांसपेरेंसी का ग्रेडिएंट हो।

Comments

@ geo1701 की टिप्पणी को स्वीकार किया जाना चाहिए, क्योंकि यह आधुनिक मानकों के लिए अधिक प्रासंगिक है।

— Dmytro Shevchenko

Answer 1

हाँ। आप दोनों वेबकिट और moz ग्रेडिएंट घोषणाओं में rgba का उपयोग कर सकते हैं:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

( src )

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

( src )

जाहिरा तौर पर आप IE में भी ऐसा कर सकते हैं, एक अजीब "विस्तारित हेक्स" वाक्यविन्यास का उपयोग कर। पहली जोड़ी (उदाहरण 55 में) अस्पष्टता के स्तर को संदर्भित करती है:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

( src )

Comments

FYI करें, "विस्तारित हेक्स" 24-बिट RGB रंग मूल्यों के बजाय सिर्फ 32-बिट ARGB है।

— मैकए

मैं मानक सीएसएस में भी काम करना चाहता हूं, लेकिन अंत में अल्फा के साथ (अधिक प्राकृतिक लगता है): #0001"लगभग पारदर्शी काले" के लिए छोटी हेक्स #ffcc00ffहोगी और #ffcc00"पूरी तरह से अपारदर्शी कीनू पीले" के समान होगी।

— उड़ते भेड़

Colorzilla पर CSS3 के ग्रैडिएंट जेनरेटर की भी जाँच करें जिसमें अच्छे प्रीसेट का एक गुच्छा है और आपके इच्छित ग्रेडिएंट को प्राप्त करने के लिए सभी क्रॉस ब्राउज़र संगत विविधताएँ हैं

— andrhamm

तो, मैं इसे बाहर की जाँच की है, सभी प्रमुख ब्राउज़रों पर काम करता है, लेकिन यह ओपेरा, किसी भी सुराग पर काम नहीं करता है?

— हूसे

कोई बात नहीं, मुझे अभी पता चला है;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));

— हूसे

Answer 2

नए सिंटैक्स को कुछ समय के लिए सभी आधुनिक ब्राउज़रों (Chrome 26, ओपेरा 12.1, IE 10 और फ़ायरफ़ॉक्स 16 से शुरू) के लिए समर्थन दिया गया है: http://caniuse.com/#feat=css-gradients

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

यह एक ढाल पेश करता है, जो शीर्ष पर ठोस काले से शुरू होता है, तल पर पूरी तरह से पारदर्शी होता है।

MDN पर प्रलेखन ।

Comments

.. शीर्ष पर ठोस काले बनाता है नीचे पूरी तरह से पारदर्शी

— आम है

मुझे लगता है कि यह एक सुझाव है और वास्तव में काम नहीं करता है?

— बार्ट

Answer 3

यह कुछ बहुत अच्छा सामान है! मुझे बहुत ही समान की आवश्यकता थी, लेकिन सफेद से पारदर्शी तक क्षैतिज ढाल के साथ। और यह ठीक काम कर रहा है! यहाँ मेरा कोड है:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }

Comments

संदर्भ के लिए, Microsoft कार्यान्वयन पर, gradientType = 1 क्षैतिज है, 0 ऊर्ध्वाधर है।

— ब्रूक्स

IE7 और IE8 ग्रेडिएंट किसी अल्फा रंग को निर्दिष्ट नहीं करते हैं? क्या वे वास्तव में पारदर्शी हो गए हैं?

— काजगामेनस

Answer 4

यहाँ मेरा कोड है:

background: #e8e3e3; /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

Answer 5

#grad
{
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

मुझे यह w3schools में मिला और मैं अपनी जरूरतों के अनुकूल था जबकि मैं ढाल और पारदर्शिता की तलाश कर रहा था। मैं w3schools को संदर्भित करने के लिए लिंक प्रदान कर रहा हूं। आशा है कि यह मदद करता है अगर कोई भी ढाल और पारदर्शिता की तलाश में है।

http://www.w3schools.com/css/css3_gradients.asp

इसके अलावा, मैं इसे जांच के लिए लिंक चिपकाने की अस्पष्टता को बदलने के लिए w3schools में यह कोशिश की

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

आशा करता हूँ की ये काम करेगा।

Answer 6

निम्नलिखित एक है कि मैं एक ही रंग के लिए पारदर्शिता (नीचे) में पूरी तरह से अपारदर्शी (शीर्ष) से ​​20% तक एक ऊर्ध्वाधर ढाल उत्पन्न करने के लिए उपयोग कर रहा हूं :

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */

Answer 7

मैं अभी हाल ही के इस उदाहरण से रूबरू हुआ। सबसे हाल के उदाहरणों को सरल बनाने और उनका उपयोग करने के लिए, सीएसएस को 'ग्रेड' का चयनकर्ता वर्ग देते हुए, (मैंने पीछे की संगतता शामिल की है)

.grad {
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

से https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient