पृष्ठभूमि-छवि पर अर्ध-पारदर्शी रंग परत?

Question

मेरे पास एक डीआईवी है और मैं पृष्ठभूमि के रूप में एक पैटर्न रखना चाहूंगा। यह पैटर्न ग्रे है। इसलिए इसे थोड़ा और अच्छा बनाने के लिए, मैं एक हल्का पारदर्शी रंग "परत" डालना चाहूंगा। नीचे मैंने कोशिश की है लेकिन जो काम नहीं किया। क्या पृष्ठभूमि की छवि पर रंगीन परत डालने का कोई तरीका है?

यहाँ मेरा CSS है:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Answer 1

यह रहा:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

इसके लिए HTML:

<div class="background">
    <div class="layer">
    </div>
</div>

बेशक आपको .backgroundकक्षा में एक चौड़ाई और ऊंचाई को परिभाषित करने की आवश्यकता है , अगर इसके अंदर कोई अन्य तत्व नहीं हैं

Comments

वहाँ एक रिश्तेदार और पूर्ण स्थिति के लिए कोई कारण नहीं है।

— स्वेन बाइडर

हां, हां, मैं थोड़े मोडल पॉपअप में था, पता नहीं क्यों। आप जवाब दे रहे हैं बेशक क्लीनर और आसान है।

— जोहान्स क्लोउ

@ जोहान्सक्लाउ उसका जवाब कैसे आता है कि वह क्लीनर और आसान है? यह काम नहीं कर रहा है, कम से कम मेरे मामले के लिए।

— 1822 में डैनी 22

मुझे लगता है कि यह क्लीनर है। बॉक्स-छाया में समस्या है अगर सामग्री bg से अधिक नहीं है आदि

— जैक

सही समाधान!

— रॉय शोए

Answer 2

मुझे पता है कि यह वास्तव में पुराना धागा है, लेकिन यह Google में शीर्ष पर दिखता है, इसलिए यहां एक और विकल्प है।

यह एक शुद्ध सीएसएस है, और किसी भी अतिरिक्त HTML की आवश्यकता नहीं है।

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

बॉक्स-शैडो फीचर के लिए आश्चर्यजनक संख्या में उपयोग हैं।

Comments

बहुत अच्छा! क्या यह एक अच्छा विचार प्रदर्शन-वार है? बॉक्स-शैडो के प्रदर्शन पर ध्यान नहीं दिया गया

— मिगुएल स्टीवंस

अच्छा हैक लेकिन एक बड़ा प्रदर्शन हत्यारा। यह हर मोबाइल डिवाइस को धीमा कर देगा। बॉक्स छाया मोबाइल उपकरणों पर प्रदर्शन समस्याओं का कारण बनता है। इससे बचने के लिए बेहतर है खासकर अगर वहाँ जाने के अन्य तरीके हैं।

— हेक्सोडस

आप जीनियस हैं सर!

— मिका

बस कुछ साल बाद एक अपडेट: मैं वर्तमान में सभी kotulas.com पर इस पद्धति का उपयोग करता हूं, और कोई महत्वपूर्ण मंदी नहीं है जिसे मैंने देखा है। यदि आप इसे सैकड़ों तत्वों पर उपयोग कर रहे हैं, तो यह एक मुद्दा बन सकता है, लेकिन 150+ छवियों वाले पृष्ठ पर भी, यह मेरे लिए कोई समस्या नहीं है। (और यह एक काम कंप्यूटर पर है।) स्वाभाविक रूप से, आप यह सुनिश्चित करने के लिए समय से पहले परीक्षण करना चाहेंगे कि यह आपके लिए सही है। और पुराने ब्राउज़र संगतता के रूप में, चूंकि कमबैक यह है कि उपयोगकर्ता को एक हॉवर-ओवर प्रभाव (कोई अन्य समस्याओं के साथ) नहीं दिखता है, मैं इसके साथ ठीक हूं।

— बेवन्सडिजाइन

मैं व्यक्तिगत रूप से इसे इस तरह उपयोग करता हूं box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2):।

— न्यूरोट्रांसमीटर

Answer 3

CSS-ट्रिक्स से ... z- इंडेक्सिंग और छद्म तत्वों को जोड़ने के बिना ऐसा करने का एक चरण तरीका है- के लिए रैखिक ढाल की आवश्यकता है जो मुझे लगता है कि आपको CSS3 के समर्थन की आवश्यकता है

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

Comments

यह बहुत अच्छा काम करता है, लेकिन अगर आप किसी रंग को पल्स करना चाहते हैं तो आप ग्रेडिएंट को चेतन नहीं कर सकते, लेकिन यह मत सोचिए कि यह किसी भी तरीके से संभव है।

— 21

मैं था background-size:cover;और background-position:center center;इस तत्व पर निर्धारित किया है। इससे वह प्रभाव रद्द हो जाता है।

— सोलेस

पृष्ठभूमि-आकार के साथ शानदार काम करना: कवर; उपरांत। कम से कम क्रोम पर।

— दाविदबोन्चेरा

निश्चित रूप से पृष्ठभूमि पैटर्न और चित्रों को टिंट करने का सबसे सुविधाजनक तरीका है, लेकिन क्रोम और अन्य के साथ इसे जांचने के लिए सावधान रहें, खासकर अगर शरीर के टैग पर लागू किया जाता है, तो क्रोम एक टन के अंतराल के साथ स्क्रॉल करेगा। FF इसे ठीक करता है।

— हास्टिग ज़ुसमेनस्टेलन

क्या मैं टॉम का संदर्भ पाने के लिए केवल एक ही बूढ़ा हूं?

— अब्राम

Answer 4

तुम भी एक रैखिक ढाल और एक छवि का उपयोग कर सकते हैं: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

ऐसा इसलिए है क्योंकि रैखिक ढाल फ़ंक्शन एक छवि बनाता है जिसे पृष्ठभूमि स्टैक में जोड़ा जाता है। https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Comments

टूलबॉक्स में जोड़ने के लिए अच्छा हैक!

— एडम योस्ट

Answer 5

तब आपको bg छवि के साथ एक रैपिंग तत्व और bg रंग के साथ सामग्री तत्व की आवश्यकता होती है:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

और सीएसएस:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

Answer 6

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

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

Comments

यह एक बहुत अच्छा जवाब है कि अतिरिक्त HTML तत्वों की आवश्यकता नहीं है। धन्यवाद!

— patr1ck

Answer 7

जब आप छवि रंग प्रोफ़ाइलों को नियंत्रित नहीं कर सकते हैं तो डायनेमिक ओवरलेइंग पाठ को शैली के लिए आसान बनाने के लिए छवियों के साथ-साथ ग्रेडर के साथ-साथ रंग लगाने के लिए मैंने इसका उपयोग किया है। आपको z- इंडेक्स के बारे में चिंता करने की जरूरत नहीं है।

एचटीएमएल

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

एस.ए.एस.एस.

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

सीएसएस

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

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

Comments

यह काम करता है, लेकिन आपको दूसरा "बाएं: 0;" बदलना होगा "नीचे: 0"

— मैथ्यू हडसन

यह स्वीकृत उत्तर होना चाहिए क्योंकि यह अनावश्यक तत्वों के निर्माण से बचता है। बस यह सुनिश्चित करें कि आपकी .background- छवि divमें कम से कम एक स्थिति है: रिश्तेदार

— mjsarfatti

Answer 8

संभावित समाधानों के व्यापक अवलोकन के लिए https://stackoverflow.com/a/18471979/193494 पर मेरा उत्तर देखें :

1. एक रेखीय ढाल के साथ कई पृष्ठभूमि का उपयोग कर,
2. एक उत्पन्न PNG, या के साथ कई पृष्ठभूमि
3. स्टाइलिंग a: द्वितीयक पृष्ठभूमि परत के रूप में कार्य करने के लिए छद्म के बाद।

Comments

कृपया उत्तर के रूप में लिंक पोस्ट न करें। प्रासंगिक कोड यहां रखें, लेकिन उस स्रोत से लिंक करें जिसे आपने इसके अलावा कॉपी किया है।

— ब्लेज़ेमॉन्गर

Answer 9

इतना जटिल क्यों? आपका समाधान लगभग सही था सिवाय इसके कि यह पैटर्न को पारदर्शी और पृष्ठभूमि के रंग को ठोस बनाने का एक आसान तरीका है । पीएनजी में पारदर्शिता हो सकती है। तो फ़ोटोशॉप का उपयोग करके पैटर्न को पारदर्शी बनाने के लिए परत को 70% तक सेट करें और अपनी छवि को फिर से शुरू करें। फिर आपको केवल एक चयनकर्ता की आवश्यकता है। क्रॉस ब्राउज़र काम करता है।

सीएसएस:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

यह मूल हैं। एक उपयोग उदाहरण इस प्रकार है कि जहां से मैं स्विच किया backgroundथा, background-imageलेकिन दोनों गुण समान हैं।

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

कृपया एक मिनट प्रतीक्षा करें! बाहरी पत्रों को जारी करने के लिए कुछ समय लेता है।

इस वेबसाइट के बजाय धीमी गति से हो रहा है ...

Comments

क्या आप उदाहरण के लिए पृष्ठभूमि-रंग लागू कर सकते हैं :hoverऔर पृष्ठभूमि छवि के ऊपर ओवरले होगा?

— सर

फ़ोटोशॉप को बूट करने और कोड की कुछ पंक्तियों को जोड़ने के बजाय ऐसा करने में अधिक समय लगेगा।

— निहाइज़र

मैंने यह कोशिश की, लेकिन पाया कि पारदर्शी png फ़ाइल आकार में काफी बड़ी थी (~ 500kb), जो इस दृष्टिकोण का एक नुकसान हो सकता है

— madz

@ काम मैं एक पैटर्न बनाने की बात करता था - जिसके परिणामस्वरूप बड़ी फ़ाइल नहीं मिलनी चाहिए। मैंने 110x110px छवि का उपयोग करके एक उदाहरण जोड़ा, जिसकी संख्या 5kb जितनी कम है। यदि आपको वास्तव में एक बड़ी छवि की आवश्यकता है तो इसे संपीड़ित करने के लिए tinypng.com का उपयोग करें ।

— हेक्सोडस

Answer 10

आप एक सेमीट्रांसपेरेंट पिक्सेल का उपयोग कर सकते हैं, जिसे आप यहां उदाहरण के लिए जनरेट कर सकते हैं , यहां तक ​​कि बेस 64 में भी सफेद 50% के साथ एक उदाहरण है:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• अपलोड किए बिना

• बिना अतिरिक्त html

• मुझे लगता है कि लोडिंग को बॉक्स-शैडो या लीनियर ग्रेडिएंट से तेज होना चाहिए

Answer 11

यहाँ केवल सीएसएस के साथ एक अधिक सरल चाल है।

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

Answer 12

इनलाइन ओवरले-इमेज के रूप में एसवीजी के साथ एक और एक (नोट: यदि आप #svg- कोड के अंदर का उपयोग करते हैं, तो आपको उसे urlencode करना होगा!)!

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Answer 13

मैं बस लक्ष्य पृष्ठभूमि div पर पृष्ठभूमि छवि सीएसएस संपत्ति का इस्तेमाल किया ।
नोट पृष्ठभूमि-छवि केवल ढाल रंग कार्यों को स्वीकार करती है।
इसलिए मैंने दो बार एक ही वांछित ओवरले रंग को जोड़ते हुए रैखिक-ढाल का उपयोग किया (रंग अस्पष्टता को नियंत्रित करने के लिए अंतिम आरजीबीए मूल्य का उपयोग करें)।

इसके अलावा, इन दो उपयोगी संसाधनों को पाया:

1. पृष्ठभूमि छवि पर पाठ (या किसी अन्य सामग्री के साथ div) जोड़ें: हीरो छवि
2. ब्लर बैकग्राउंड छवि केवल, शीर्ष पर div को धुंधला किए बिना: धुंधला बैकग्राउंड इमेज

एचटीएमएल

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

सीएसएस

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

Answer 14

आप अपने ओवरले रंग में अस्पष्टता भी जोड़ सकते हैं।

करने के बजाय

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

तुम कर सकते हो:

background: url('../img/bg/diagonalnoise.png');

फिर अपारदर्शिता रंग के लिए एक नई शैली बनाएं:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

नीचे दी गई जो भी संख्या आप चाहते हैं, उसकी अस्पष्टता को बदलें। फिर आप इस रंग शैली को अपनी छवि के समान आकार दें। यह काम करना चाहिए।