सीएसएस: पृष्ठभूमि रंग पर पृष्ठभूमि छवि

मेरे पास पैनल है जिसे मैंने नीला रंग दिया है यदि इस पैनल का चयन किया जा रहा है (उस पर क्लिक किया गया है)। इसके अतिरिक्त, मैं उस पैनल में एक छोटा सा संकेत (.png छवि) जोड़ता हूं, जो इंगित करता है कि चयनित पैनल पहले से ही पहले से ही चुना गया है।सीएसएस: पृष्ठभूमि रंग पर पृष्ठभूमि छवि

तो यदि उपयोगकर्ता उदाहरण के लिए 10 पैनल देखता है और उनमें से 4 में यह छोटा संकेत है, तो वह जानता है कि वह पहले से ही उन पैनलों पर क्लिक कर चुका है। यह अभी तक ठीक काम करता है। समस्या यह है कि मैं छोटे चिह्न को प्रदर्शित नहीं कर सकता और पैनल को एक ही समय में नीला बना सकता हूं।

मैंने पैनल को सीएसएस background: #6DB3F2; और background-image: url('images/checked.png') के साथ पृष्ठभूमि छवि के साथ नीले रंग में सेट किया है। लेकिन ऐसा लगता है कि पृष्ठभूमि रंग छवि से ऊपर है ताकि आप संकेत नहीं देख सकें।

क्या यह पृष्ठभूमि रंग और पृष्ठभूमि छवि के लिए z-index es सेट करना संभव है?

स्रोत

2011-11-19 mkn

185

आप प्रत्येक के लिए पूरा संपत्ति नाम का उपयोग करने की जरूरत है:

background-color: #6DB3F2; 
background-image: url('images/checked.png');

या, आप पृष्ठभूमि आशुलिपि का उपयोग करें और एक लाइन में यह सब निर्दिष्ट कर सकते हैं:

background: #6DB3F2 url('images/checked.png');

स्रोत

2011-11-19 16:05:37 dodger

1 विधि मेरे लिए काम नहीं किया। दूसरा, शॉर्टेंड विधि पूरी तरह से काम करता है। –

दूसरे ने भी मेरे लिए काम किया। धन्यवाद स्टीव। – starkeen

पहले भी मेरे लिए काम नहीं किया। दूसरा किया। – felwithe

वाकई दिलचस्प समस्या, हेवन इसे अभी तक नहीं देखा है। यह कोड मेरे लिए ठीक काम करता है। क्रोम और IE9

<html> 
<head> 
<style> 
body{ 
    background-image: url('img.jpg'); 
    background-color: #6DB3F2; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

स्रोत

2011-11-19 16:07:04

-8

body 
{ 
background-image:url('image/img2.jpg'); 
margin: 0px; 
padding: 0px; 
}

स्रोत

2013-08-13 11:02:24

में यह परीक्षण किया मेरे लिए इस समाधान बाहर काम नहीं किया:

background-color: #6DB3F2; 
background-image: url('images/checked.png');

लेकिन बजाय इसे दूसरी तरह से काम किया:

<div class="block"> 
<span> 
... 
</span> 
</div>

सीएसएस :

.block{ 
    background-image: url('img.jpg') no-repeat; 
    position: relative; 
} 

.block::before{ 
    background-color: rgba(0, 0, 0, 0.37); 
    content: ''; 
    display: block; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
}

स्रोत

2014-07-24 21:57:00

कोड फ्रांसिस के लिए धन्यवाद !! जैसा कि वह कहता है, पृष्ठभूमि रंग और छवि में शामिल होने से भी मेरे लिए समस्या हल नहीं हुई। उस कोड और मेरे कोड पर छोटे बदलावों के साथ मैंने समस्या को हल करने में कामयाब रहे। – Mikel

आप भी इस तरह की छवि का उपयोग करें और दोनों रंग करने के लिए कम चाल का उपयोग कर सकते हैं: -

body { 
    background:#000 url('images/checked.png'); 
}

स्रोत

2014-08-16 20:50:11

-2

<li style="background-color: #ffffff;"><a href="/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>

अन्य नमूना बॉक्स Center छवि और पृष्ठभूमि का रंग

1.First clearpixel ठीक छवि क्षेत्र 2. स्टाइल सेंटर छवि क्षेत्र बॉक्स 3.li पृष्ठभूमि या div रंग शैली

स्रोत

2014-12-27 07:03:34 alpc

यदि कोई अन्य उचित विकल्प है तो इनलाइन सीएसएस उपयुक्त नहीं है। – Smittles

MDN Web Docs पर आधारित आप एकाधिक पृष्ठभूमि यूएसआई सेट कर सकते हैं background-color को छोड़कर ng shorthand background संपत्ति या व्यक्तिगत गुण।

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

पहले आइटम (छवि) पैरामीटर में शीर्ष पर रखा जाएगा: आपके मामले में, आप एक चाल linear-gradient इस तरह उपयोग कर सकते हैं। दूसरी वस्तु (रंग पृष्ठभूमि) पहले के नीचे रखा जाएगा। आप व्यक्तिगत रूप से अन्य गुण भी सेट कर सकते हैं। उदाहरण के लिए, छवि आकार और स्थिति सेट करने के लिए।इस विधि का

background-size: 30px 30px; 
background-position: bottom right; 
background-repeat: no-repeat;

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

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png'); 
background-size: cover, contain; 
background-position: center, right bottom; 
background-repeat: no-repeat, no-repeat;

व्यक्तिगत संपत्ति पैरामीटर क्रमशः सेट किए गए हैं। चूंकि छवि रंग ओवरले के नीचे रखी जाती है, इसलिए इसके गुण पैरामीटर रंग ओवरले पैरामीटर के बाद भी रखे जाते हैं।

स्रोत

2017-12-24 21:16:43 lukibsubekti

और अगर आप पृष्ठभूमि में एक काला छाया उत्पन्न चाहते हैं, आप उपयोग कर सकते हैं निम्नलिखित:

background:linear-gradient(rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

स्रोत

2018-01-15 17:12:53

सीएसएस: पृष्ठभूमि रंग पर पृष्ठभूमि छवि

उत्तर

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