CSS: बैकग्राउंड कलर पर बैकग्राउंड इमेज

169

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

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

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

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

— MKN
स्रोत

289

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

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

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

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

— चालबाज़
स्रोत

7

पहली विधि मेरे लिए काम नहीं की। 2, आशुलिपि विधि पूरी तरह से काम करती है।

— स्टीव ब्रेज़

1

असुरक्षित शैली मूल्य

— Nexeuz

@Nexeuz आप इस शैली वाक्य रचना को असुरक्षित Nexeuz के रूप में क्यों मानते हैं?

— वेबवुमन

31

मेरे लिए यह समाधान कारगर नहीं हुआ:

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%;
}

— फ्रांसिस अकनई
स्रोत

2

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

— मिकेल

17

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

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

— Risa__B
स्रोत

5

एमडीएन वेब डॉक्स के आधार पर आप शॉर्टहैंड backgroundप्रॉपर्टी या व्यक्तिगत संपत्तियों को छोड़कर कई पृष्ठभूमि सेट कर सकते हैं background-color। आपके मामले में, आप linear-gradientइस तरह का उपयोग कर एक चाल कर सकते हैं :

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

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

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;

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

— लुकी बी
स्रोत

2

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

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

— रामजी खील
स्रोत

2

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

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

— केसर सिसोदिया
स्रोत

1

यह वास्तव में मेरे लिए काम करता है:

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

आप एक ठोस छाया भी छोड़ सकते हैं और पृष्ठभूमि छवि सेट कर सकते हैं:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

यदि पहला विकल्प किसी कारण से काम नहीं कर रहा है और आप बॉक्स छाया का उपयोग नहीं करना चाहते हैं तो आप हमेशा किसी अतिरिक्त HTML के बिना छवि के लिए छद्म तत्व का उपयोग कर सकते हैं:

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}

— फर्नान गार्सिया डी ज़ुनीगा
स्रोत

0

यहां बताया गया है कि मैंने पृष्ठभूमि में एक आइकन के साथ अपने रंगीन बटन कैसे स्टाइल किए हैं

मैंने रंग के लिए "पृष्ठभूमि-रंग" संपत्ति और छवि के लिए "पृष्ठभूमि" संपत्ति का उपयोग किया।

  <style>
    .btn {
      display: inline-block;
      line-height: 1em;
      padding: .1em .3em .15em 2em
      border-radius: .2em;
      border: 1px solid #d8d8d8;

      background-color: #cccccc;
    }

    .thumb-up {
      background: url('/icons/thumb-up.png') no-repeat 3px center;
    }

    .thumb-down {
      background: url('/icons/thumb-down.png') no-repeat 3px center;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>

— दा बिगिनर
स्रोत

-2

<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=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>

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

1. पहली क्लीयरपिक्सल फिक्स इमेज एरिया 2. स्टाइल सेंटर इमेज एरिया बॉक्स 3. बैक बैकग्राउंड या डिव कलर स्टाइल

— ALPC
स्रोत

2

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

— जॉन मिटेन

-10

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

— विकाश पाठक
स्रोत