मैं एक ही तत्व पर पृष्ठभूमि-छवि और CSS3 ग्रेडिएंट को कैसे संयोजित कर सकता हूं?

Question

मैं अपने लिए CSS3 ग्रेडिएंट का उपयोग कैसे करूं background-colorऔर फिर background-imageकिसी प्रकार की हल्की पारदर्शी बनावट को लागू करने के लिए एक का उपयोग करूं ?

Comments

नोट: आप बैकग्राउंड इमेज (15px केंद्र) को भी स्थिति में रख सकते हैं या इसे 'रिपीट' प्रॉपर्टी पर सेट कर सकते हैं (उदाहरण के लिए काम करता है 3.6.3+)। सामान्य वर्ग {बैकग्राउंड: url ("../ icon.png") no- 15px केंद्र, -moz-linear-gradient (केंद्र शीर्ष, #FFFFFF, #DDDDDD) दोहराएं;}

— जूलियन बेयरुबे

एसवीजी या एसवीजी + सीएसएस का उपयोग क्रमशः फ्लैट बनावट (शोर) या बनावट वाले ग्रेडिएंट बनाने के लिए किया जा सकता है।

— क्लिंट पच

Answer 1

एकाधिक पृष्ठभूमि!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

ये 2 लाइनें किसी भी ब्राउज़र के लिए कमबैक हैं जो ग्रेडिएंट नहीं करती हैं। केवल IE <9 के नीचे छवियों को स्टैक करने के लिए नोट्स देखें।

• पंक्ति 1 एक सपाट पृष्ठभूमि रंग सेट करती है।
• पंक्ति 2 पृष्ठभूमि छवि को कम करती है।

अंतिम पंक्ति उन ब्राउज़रों के लिए पृष्ठभूमि छवि और ढाल निर्धारित करती है जो उन्हें संभाल सकते हैं।

• लाइन 3 सभी अपेक्षाकृत आधुनिक ब्राउज़रों के लिए है।

लगभग सभी वर्तमान ब्राउज़रों के पास कई पृष्ठभूमि छवियों और सीएसएस पृष्ठभूमि के लिए समर्थन है। ब्राउज़र समर्थन के लिए http://caniuse.com/#feat=css-gradients देखें । आपको कई ब्राउज़र उपसर्गों की आवश्यकता क्यों है, इस पर अच्छे पोस्ट के लिए, http://codepen.io/thebabydino/full/pjxVWp/ देखें

लेयर स्टैक

यह ध्यान दिया जाना चाहिए कि पहले परिभाषित छवि स्टैक में सबसे ऊपर होगी। इस स्थिति में, छवि ग्रेडिएंट के शीर्ष पर है।

बैकग्राउंड लेयरिंग के बारे में अधिक जानकारी के लिए http://www.w3.org/TR/css3-background/#layering देखें ।

IE <9 के लिए केवल (घोषणा में कोई ग्रेडिएंट) स्टैकिंग छवियां

IE9 और ऊपर इसी तरह छवियों को ढेर कर सकते हैं। आप इसका उपयोग ie9 के लिए एक ढाल छवि बनाने के लिए कर सकते हैं, हालांकि व्यक्तिगत रूप से, मैं नहीं करूंगा। हालांकि केवल छवियों का उपयोग करते समय ध्यान दिया जाना चाहिए, <<9 पर कमबैक स्टेटमेंट को नजरअंदाज करेंगे और कोई छवि नहीं दिखाएंगे। यह तब नहीं होता है जब एक ढाल को शामिल किया जाता है। इस मामले में एक सिंगल फॉलबैक इमेज का उपयोग करने के लिए मैं सुझाव देता हूं कि पॉल आयरिश के शानदार कंडिशनल एचटीएमएल एलिमेंट का उपयोग आपके फॉलबैक कोड के साथ किया जाए:

.lte9 #target{ background-image: url("IMAGE_URL"); }

पृष्ठभूमि की स्थिति, आकार आदि।

अन्य गुण जो एकल छवि पर लागू होते हैं वे भी अल्पविराम से अलग हो सकते हैं। यदि केवल 1 मान की आपूर्ति की जाती है, तो यह ग्रेडियेंट सहित सभी स्टैक्ड छवियों पर लागू किया जाएगा। background-size: 40px;दोनों छवि और 40px ऊंचाई और चौड़ाई के लिए ढाल विवश होगा। हालाँकि उपयोग background-size: 40px, cover;करने से छवि 40px बन जाएगी और ढाल तत्व को कवर कर देगा। केवल एक छवि के लिए एक सेटिंग लागू करने के लिए, दूसरे के लिए डिफ़ॉल्ट सेट करें: background-position: 50%, 0 0;या इसके उपयोग का समर्थन करने वाले ब्राउज़र के लिए initial:background-position: 50%, initial;

आप बैकग्राउंड शॉर्टहैंड का भी उपयोग कर सकते हैं, हालांकि यह फॉलबैक रंग और छवि को हटा देता है।

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

यही बात बैकग्राउंड-पॉजिशन, बैकग्राउंड-रिपीट आदि पर भी लागू होती है।

Comments

आपके उत्तर के लिए धन्यवाद, कैसे background-positionछवि को नियंत्रित करने के लिए किसी भी विचार और ढाल नहीं?

— adardesign

इसके लिए धन्यवाद, बेहतरीन जानकारी। | @ प्रारूप: पृष्ठभूमि शॉर्टहैंड का उपयोग करें। उपरोक्त उदाहरण को संशोधित करते हुए, यह होगा: पृष्ठभूमि: url (IMAGE_URL) नो-रिपीट लेफ्ट टॉप, [उचित-क्रमबद्ध];

— रसेलयूरीस्टी

@adardesign: background: url ("../ images / icon.png") no-repeat 15px सेंटर, -moz-linear-gradient (सेंटर टॉप, #FFFFFF, #DDDDD); / # 15px सेंटर, यह जोड़ देगा एक 15px बायीं गद्दी और केंद्र में आइकन को संरेखित करें। * *

— जुलिएन बरूबे

क्रोम कम से कम आप अलग-अलग मूल्यों के लिए कोमा का उपयोग करके कई छवियों के लिए पृष्ठभूमि की स्थिति को नियंत्रित कर सकते हैं .. इस तरह .. पृष्ठभूमि-स्थिति: 0px 8px, 0px 0px ...

— ऑरलैंडो

इसका शायद यह भी ध्यान देने योग्य है कि यदि आपको छवि की अन्य विशेषताओं को स्थिति को निर्धारित करने की आवश्यकता है, तो आप बाद में सीएसएस नियम में पृष्ठभूमि सीएसएस गुणों का उपयोग कर सकते हैं। जैसे: पृष्ठभूमि-दोहराना: नहीं-दोहराना; पृष्ठभूमि-स्थिति: केंद्र; पृष्ठभूमि का आकार: 1300px 1303px;

— फिल हिले

Answer 2

यदि आप भी अपनी छवि के लिए पृष्ठभूमि की स्थिति निर्धारित करना चाहते हैं , तो आप इसका उपयोग कर सकते हैं:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

या आप एक कम मिश्रण (बूटस्ट्रैप शैली) भी बना सकते हैं:

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

Comments

इस पृष्ठ पर केवल वही है जिसने मेरे लिए काम किया है। मैंने इसे सामान्य सीएसएस के साथ प्रयोग किया है। मैंने जिन अन्य लोगों की कोशिश की वे वास्तव में ओवरले ग्रेडिएंट रंग के साथ छवि को छिपा रहे थे।

— स्का

@ सस्का - बस फिर ऑर्डर को उल्टा कर दें। जेड-इंडेक्स दूसरे तरीके से काम करता है। Stackoverflow.com/questions/14915542/… देखें ।

— फ्रैंक कानिज

Answer 3

एहसास करने के लिए एक बात यह है कि पहली परिभाषित पृष्ठभूमि छवि स्टैक में सबसे ऊपर है। अंतिम परिभाषित छवि बॉटलमोस्ट होगी। इसका मतलब है, एक छवि के पीछे एक पृष्ठभूमि ढाल होने के लिए, आपको इसकी आवश्यकता होगी:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

आप छवियों के लिए पृष्ठभूमि की स्थिति और पृष्ठभूमि का आकार भी परिभाषित कर सकते हैं। मैं एक साथ कुछ दिलचस्प चीजों के बारे में ब्लॉग पोस्ट डालता हूं जो आप CSS3 ग्रेडिएंट्स के साथ कर सकते हैं

Comments

उत्तर तब और भी बेहतर होगा, जब W3C मानकों का अंकन अंत में आता है।

— वोल्कर ई।

यह कोड ठीक से काम नहीं करता है। हम केवल स्टैकऑवरफ्लो इमेज देख सकते हैं, बैकग्राउंड इमेज को पीछे / उसके पहले नहीं।

— या ए।

मुझे लगता है कि -webkit-ढाल पदावनत किया जा सकता है stackoverflow.com/questions/10683364/...

— alpalalpal

कोड काम नहीं कर सकता है लेकिन यह एक बहुत ही महत्वपूर्ण बिंदु है। आप यह बता सकते हैं कि पृष्ठभूमि के तत्व कैसे काम करते हैं लेकिन आपको लगता है कि उन्हें स्तरित होना चाहिए। यदि आप छवि के शीर्ष पर ग्रेडिएंट चाहते हैं, तो इसे पहले रखें और आप शायद हमें RGBa करना चाहते हैं ताकि आप पीछे की छवि देख सकें:background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');

— Serraosays

Answer 4

आप बस टाइप कर सकते हैं:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);

Comments

यह एकमात्र समाधान था जिसने मेरे लिए काम किया (फ़ायरफ़ॉक्स v57)। linear-gradient()पहले आना पड़ा url(), और आंशिक पारदर्शिता ढाल रंग के लिए प्रयोग की जाने वाली थी, का उपयोग करते हुए rgba()। कुछ और बस सूची पर पहली परिभाषा का इस्तेमाल किया (जैसे कि दूसरा एक कमबैक था, font-familyघोषणाओं के समान कैसे काम करता है)।

— वाल्डिएरियस

@waldyrious ध्यान दें कि उपयोगकर्ता रैखिक ढाल पर एक प्रकार की हल्की पारदर्शी बनावट लागू करना चाहता है इसलिए छवि को पहले आना चाहिए क्योंकि यह ढाल पर प्रदान किया जाना चाहिए

— एलेक्स गुरेरो

अर्ध-पारदर्शिता के माध्यम से एक छवि और एक ढाल को संयोजित करना एक ही प्रभाव होना चाहिए, भले ही वह सामने हो। हालाँकि, आप हमेशा अपने ग्रेडिएंट को कुछ पारदर्शिता रखने के लिए परिभाषित कर सकते हैं, लेकिन जो चित्र पहले से ही अर्ध-पारदर्शी नहीं हैं, उन्हें आसानी से / गतिशील रूप से इस तरीके से उपयोग किए जाने के लिए परिवर्तित नहीं किया जा सकता है। इसीलिए मुझे ढाल को पहले और अधिक उपयोगी बनाने के दृष्टिकोण का पता चलता है।

— वॉलीड्रिअस

Answer 5

मैं इसे काम करने के लिए हमेशा निम्न कोड का उपयोग करता हूं। कुछ नोट हैं:

1. यदि आप ग्रेडिएंट से पहले छवि URL रखते हैं, तो यह छवि अपेक्षा के अनुसार ढाल के ऊपर प्रदर्शित होगी।

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}

<div class="background-gradient"></div>

2. यदि आप छवि URL से पहले ग्रेडिएंट रखते हैं, तो यह छवि ग्रेडिएंट के नीचे प्रदर्शित होगी ।

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}

<div class="background-gradient"></div>

यह तकनीक ठीक वैसी ही है जैसे हमारे यहाँ वर्णन के अनुसार कई पृष्ठभूमि चित्र हैं

Comments

महान! मैं इसे बोल्ड करता हूं -> यदि आप छवि URL से पहले ग्रेडिएंट रखते हैं, तो यह छवि ग्रेडिएंट के नीचे प्रदर्शित होगी।

— एलीडाहसन

Answer 6

मेरा समाधान:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

Comments

यह समाधान मेरे मामले में छवि के शीर्ष पर ढाल शो करने के लिए काम करता है, अन्यथा यह छवि द्वारा छिपाया जाएगा।

— vizFlux

Answer 7

मेरे पास एक कार्यान्वयन था जहां मुझे इस तकनीक को एक कदम आगे बढ़ाने की जरूरत थी, और मैं अपने काम को रेखांकित करना चाहता था। नीचे दिया गया कोड समान कार्य करता है, लेकिन SASS, Bourbon और एक छवि स्प्राइट का उपयोग करता है।

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS और बॉर्बन क्रॉस ब्राउजर कोड का ध्यान रखते हैं, और अब मुझे यह घोषित करना होगा कि प्रति बटन स्प्राइट पोजिशन क्या है। सक्रिय और होवर राज्यों के लिए इस प्रिंसिपल का विस्तार करना आसान है।

Answer 8

यदि आपको पृष्ठभूमि चित्र डाउनलोड करने में अजीब त्रुटियां हैं, तो W3C लिंक चेकर का उपयोग करें: https://validator.w3.org/checklink

यहां आधुनिक मिश्रण हैं जिनका मैं उपयोग करता हूं (क्रेडिट: पीएसए: ग्रेडिएंट जनरेटर का उपयोग नहीं करते हैं ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

Answer 9

यहाँ एक MIXIN है जिसे मैंने उन सभी चीज़ों को संभालने के लिए बनाया है जिनका लोग उपयोग करना पसंद कर सकते हैं:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

यह इस तरह से इस्तेमाल किया जा सकता है:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

आशा है कि आप लोगों को यह मददगार लगेगा।

प्रारंभिक समाधान खोजने के लिए @Gidgidonihah को श्रेय।

Answer 10

मैं वही काम करने की कोशिश कर रहा था। जबकि पृष्ठभूमि-रंग और पृष्ठभूमि-छवि एक वस्तु के भीतर अलग-अलग परतों पर मौजूद हैं - जिसका अर्थ है कि वे सह-अस्तित्व में हो सकते हैं - सीएसएस ग्रेडिएंट पृष्ठभूमि-छवि परत के सह-विकल्प प्रतीत होते हैं।

मैं जो बता सकता हूं, उससे सीमा-छवि को कई पृष्ठभूमि की तुलना में व्यापक समर्थन मिलता है, इसलिए शायद यह एक वैकल्पिक दृष्टिकोण है।

http://articles.sitepoint.com/article/css3-border-images

अद्यतन: थोड़ा और अधिक शोध। लगता है पेट्रा ग्रेगोरोवा ने यहाँ कुछ काम किया है -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Answer 11

आप कई पृष्ठभूमि का उपयोग कर सकते हैं: रैखिक-ढाल (); कॉल, लेकिन यह प्रयास करें:

यदि आप चाहते हैं कि छवियों को एक साथ पूरी तरह से फ़्यूज़ किया जाए जहां यह अलग HTTP अनुरोधों के कारण तत्वों को अलग-अलग लोड नहीं दिखता है तो इस तकनीक का उपयोग करें। यहां हम एक ही तत्व पर दो चीजें लोड कर रहे हैं जो एक साथ लोड होते हैं ...

बस सुनिश्चित करें कि आप अपनी प्री-रेंडर की गई 32-बिट पारदर्शी png छवि / बनावट को पहले base64 स्ट्रिंग में परिवर्तित करते हैं और बैकग्राउंड-इमेज css कॉल (इस उदाहरण में INSERTIMAGEBLOBHERE के स्थान पर) का उपयोग करते हैं।

मैंने इस तकनीक का उपयोग एक वेफर लुकिंग टेक्सचर और अन्य इमेज डेटा को फ्यूज करने के लिए किया है जो एक मानक आरजीबीए पारदर्शिता / रैखिक ढाल सीएसएस नियम के साथ क्रमबद्ध है। कई कलाओं को बिछाने और HTTP अनुरोधों को बर्बाद करने से बेहतर काम करता है जो मोबाइल के लिए बुरा है। सब कुछ भरी हुई क्लाइंट साइड है जिसमें कोई फ़ाइल ऑपरेशन की आवश्यकता नहीं है, लेकिन दस्तावेज़ बाइट का आकार बढ़ाता है।

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

Answer 12

यदि आपको IE 9 (HTML 5 और HTML 4.01 स्ट्रिक्ट) में एक साथ काम करने वाले ग्रेडिएंट और बैकग्राउंड इमेज प्राप्त करने हैं, तो अपने सीएसएस क्लास में निम्नलिखित विशेषता घोषणा जोड़ें और यह ट्रिक करना चाहिए:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

ध्यान दें कि आप filterविशेषता का उपयोग करते हैं और progid:[val]अर्धविराम के साथ विशेषता मान को बंद करने से पहले अल्पविराम से अलग होने के दो उदाहरण हैं । यहाँ की बेला है । यह भी ध्यान दें कि जब आप फिडेल को देखते हैं तो ढाल गोल कोनों से परे फैली होती है। मेरे पास इसके लिए कोई फ़िक्स नहीं है जो गोल कोनों का उपयोग नहीं कर रहा है। यह भी ध्यान दें कि src [IMAGE_URL] विशेषता में एक रिश्तेदार पथ का उपयोग करते समय, पथ दस्तावेज़ पृष्ठ के सापेक्ष है और सीएसएस फ़ाइल ( स्रोत देखें ) नहीं।

यह लेख ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) है जो मुझे इस समाधान की ओर ले जाता है। यह IE- विशिष्ट CSS3 के लिए बहुत उपयोगी है।

Answer 13

मैं बैकग्राउंड बटन को बैकग्राउंड इमेज, बैकग्राउंड ग्रेडिएंट कॉम्बिनेशन के साथ बनाना चाहता था।

http://enjoycss.com/ ने मेरे कार्य को करने में मदद की। केवल मुझे कुछ ऑटो उत्पन्न अतिरिक्त सीएसएस को निकालना होगा। लेकिन यह वास्तव में अच्छी साइट है अपने खरोंच काम का निर्माण।

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

Answer 14

मैं उस तरह से समस्या का समाधान करता हूं। मैं HTML में ग्रैडिएंट को परिभाषित करता हूं और शरीर में पृष्ठभूमि छवि

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}

Answer 15

मेरे उत्तरदायी डिजाइन के लिए, बॉक्स के दाईं ओर मेरे ड्रॉप-बॉक्स डाउन-एरो (ऊर्ध्वाधर समझौते), स्थिति के रूप में प्रतिशत स्वीकार किए जाते हैं। प्रारंभ में डाउन-एरो "स्थिति: निरपेक्ष; सही: 13 पीएक्स" था। 97% पोजिशनिंग के साथ इसने आकर्षण की तरह काम किया:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PS क्षमा करें, फ़िल्टर को संभालना नहीं जानते।

Answer 16

एक निश्चित तरीके के तरीके के रूप में, आप अपने cssउपयोग में एक पृष्ठभूमि छवि बना सकते हैं, जिसे 500x5 पिक्सेल कहते हैं:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

जहां xxxxxxअंतिम ढाल रंग से मेल खाने वाले रंग से मेल खाती है।

आप इसे स्क्रीन के नीचे तक भी ठीक कर सकते हैं और यह प्रारंभिक ढाल रंग से मेल खाता है।

Comments

-1 क्योंकि: एक बात के लिए, "पृष्ठभूमि-आईएमजी" एक वैध सीएसएस नियम नहीं है। दूसरे के लिए, यह वास्तव में सवाल का जवाब नहीं देता है।

— क्रिस ब्राउन