मैं पृष्ठभूमि छवि और रंग का एक साथ उपयोग क्यों नहीं कर सकता?

Question

मुझे क्या करना कोशिश कर रहा हूँ दोनों को दिखाने के लिए है background-colorऔर background-imageइसलिए मेरे में से आधे, divसही छाया पृष्ठभूमि छवि को कवर किया जाएगा, और अन्य बाएं हिस्से पृष्ठभूमि रंग को कवर किया जाएगा।

लेकिन जब मैं उपयोग करता हूं background-image, तो रंग गायब हो जाता है।

Comments

आपका CSS कोड क्या है?

— मई'09

Answer 1

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

आप शैलियों background-colorऔर सेट करें background-image। यदि छवि तत्व से छोटी है, तो आपको background-positionइसे सही करने के लिए शैली का उपयोग करने की आवश्यकता है , और इसे दोहराए जाने और पूरी पृष्ठभूमि को कवर करने के लिए रखें जो आप background-repeatशैली का उपयोग करते हैं:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

या समग्र शैली का उपयोग कर background:

background: green url(images/shadow.gif) right no-repeat;

यदि आप backgroundदोनों को अलग-अलग सेट करने के लिए मिश्रित शैली का उपयोग करते हैं , तो केवल अंतिम एक का उपयोग किया जाएगा, यही एक कारण है कि आपका रंग दिखाई नहीं दे रहा है:

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

तत्व के केवल भाग को कवर करने के लिए विशेष रूप से पृष्ठभूमि छवि को सीमित करने का कोई तरीका नहीं है, इसलिए आपको यह सुनिश्चित करना होगा कि छवि तत्व से छोटी है, या यह कि कोई पारदर्शी क्षेत्र है, पृष्ठभूमि का रंग दिखाई देने के लिए।

Comments

मुझे यह काम कैसे करना है मैं उपयोग करना चाहता हूं कि background: -webkit-linear-gradient(bottom, rgb(222,222,222) 19%, rgb(201,201,201) 50%, rgb(219,219,219) 80%); AND background-image: url(icon.png) no-repeat right;मैं ढाल और छवि-आइकन दोनों को कैसे लागू करूं। कृपया मदद कीजिए।

— अनीश नायर

stackoverflow.com/questions/2504071/…

— यासिर

उत्तर: @AnishNair - background:आशुलिपि है और उसके बाद मान लिया गया कोई छवि निर्दिष्ट नहीं है और अधिक चलता हैbackground-image

— sheriffderek

यह वही था जो मुझे परेशान कर रहा था - धन्यवाद! यदि आप दोनों को अलग-अलग सेट करने के लिए मिश्रित शैली की पृष्ठभूमि का उपयोग करते हैं, तो केवल अंतिम एक का उपयोग किया जाएगा, यही एक कारण है कि आपका रंग दिखाई नहीं दे रहा है:

— GeminiDakota

Answer 2

एक छवि को टिंट करने के लिए, आप CSS3 backgroundका उपयोग छवियों और स्टैक को स्टैक करने के लिए कर सकते हैं linear-gradient। नीचे दिए गए उदाहरण में, मैं एक linear-gradientवास्तविक ग्रेडिएंट के साथ उपयोग करता हूं । ब्राउज़र ग्रेडिएटर्स को छवियों के रूप में मानता है (मुझे लगता है कि यह वास्तव में एक बिटमैप उत्पन्न करता है और इसे ओवरले करता है) और इस प्रकार, वास्तव में कई छवियों को ढेर कर रहा है।

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

हल्के नीले रंग के साथ एक ग्राफ-पेपर का उत्पादन करेंगे, अगर आपके पास पीएनजी था। ध्यान दें कि स्टैकिंग ऑर्डर आपके मानसिक मॉडल के विपरीत काम कर सकता है, जिसमें पहला आइटम शीर्ष पर होता है।

मोज़िला द्वारा उत्कृष्ट प्रलेखन, यहाँ:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

ढ़ाल बनाने के लिए उपकरण:

http://www.colorzilla.com/gradient-editor/

नोट - IE11 में काम नहीं करता है! जब मुझे पता चलेगा कि मैं एक अपडेट पोस्ट करूंगा, क्योंकि यह माना जाता है।

Answer 3

उपयोग

background:red url(../images/samle.jpg) no-repeat left top;

Answer 4

और इस उत्तर में जोड़ने के लिए , सुनिश्चित करें कि छवि में एक पारदर्शी पृष्ठभूमि है।

Comments

अच्छा जोड़ है। यह मेरे साथ तब हुआ जब मैंने .png के बजाय एक .jpg का प्रयोग किया

— corbin

टिप्पणी के रूप में बेहतर उत्तर के रूप में इसे पोस्ट न करें।

— इहराब अल असिमी

क्या तुमने देखा है जब यह है ?! व्यावहारिक रूप से संस्थापक पीढ़ियों। यह जंगली पश्चिम था, कोई नियम नहीं। आप newbies यह सब एक सुनहरी थाली पर परोसा गया ;-)

— Itay Moav -Malimovka

Answer 5

यहाँ एक उदाहरण का उपयोग कर रहा है background-imageऔर background-colorएक साथ:

.box {
  background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
  display: inline-block;
}

<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>

Answer 6

दरअसल एक तरीका है जिससे आप बैकग्राउंड इमेज के साथ बैकग्राउंड कलर का इस्तेमाल कर सकते हैं। इस स्थिति में, पृष्ठभूमि वाला भाग एक सफेद / पारदर्शी एक के बजाय उस निर्दिष्ट रंग से भरा होगा।

इसे प्राप्त करने के लिए, आपको backgroundइस तरह की संपत्ति निर्धारित करने की आवश्यकता है :

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

बाद में अल्पविराम और रंग कोड नोट करें no-repeat ; यह आपकी इच्छित पृष्ठभूमि रंग सेट करता है।

मैंने इसे इस YouTube वीडियो में खोजा है , हालांकि मैं किसी भी माध्यम से उस चैनल या वीडियो से संबद्ध नहीं हूं।

Comments

मुझे इस पर संदेह हुआ, आश्चर्य हुआ कि यह बहुत अच्छा काम करता है। हालांकि इसके लिए अनुकूलता देखने की जरूरत होगी। +1

— निकी थॉमस

Answer 7

छवि का आधा भाग पारदर्शी बनाएं ताकि पृष्ठभूमि का रंग इसके माध्यम से दिखाई दे।

एल्स बस कंटेनर डिव को 50% ऊपर उठाते हुए एक और div जोड़ते हैं और इसे या तो बाएं या दाएं फ्लोट करते हैं। फिर छवि या उस पर रंग लागू करें।

Comments

यह मानता है कि आपकी पृष्ठभूमि की छवि युक्त डिव के रूप में बड़ी थी।

— एमआर-यूरो

Answer 8

गेको के पास एक अजीब बग है, जहां चयनकर्ता के background-colorलिए सेटिंग करने से शरीर के तत्व htmlको कवर किया जाएगा, background-imageभले ही प्रभाव मेंbody तत्व में अधिक जेड-इंडेक्स हो और आपको सरल तर्क पर आधारित शुद्ध रूप से शरीर के साथ-साथ देखने में सक्षम होना चाहिए ।background-imagehtml background-color

गेको बग

निम्नलिखित से बचें ...

html {background-color: #fff;}
body {background-image: url(example.png);}

चारों ओर काम

body {background-color: #fff; background-image: url(example.png);}

Answer 9

सभी को नमस्कार, मैंने पृष्ठभूमि-छवि और पृष्ठभूमि-रंग को एक साथ मिलाने का एक और तरीका आज़माया:

एचटीएमएल

<article><canvas id="color"></canvas></article>

सीएसएस

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

JAVASCRIPT

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

कृपया मुझे बताएं कि क्या यह आपके लिए काम करता है धन्यवाद

Answer 10

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;

Comments

इस सवाल का जवाब कैसे / क्यों देता है? कृपया अपना उत्तर संपादित करके विस्तृत करें।

— आर्टजोम बी।

इस तरह दो लाइनें अनावश्यक हैं। इसे एक घोषणा में रखा जा सकता है। अन्य उदाहरण यहाँ पृष्ठ पर देखें। background: red url(directoryName/imageName.extention) bottom left no-repeat;

— Kout