CSS का उपयोग करके बैकग्राउंड को डार्क कैसे करें?

Question

इसमें पाठ के साथ मेरा एक तत्व है। जब भी मैं अपारदर्शिता को कम करता हूं, तो मैं WHOLE शरीर की अपारदर्शिता को कम करता हूं। क्या कोई ऐसा तरीका है जिससे मैं सिर्फ background-imageगहरा कर सकता हूं , और बाकी सब कुछ नहीं?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

Answer 1

बस इस कोड को अपनी छवि सीएसएस में जोड़ें

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
    }

संदर्भ: रैखिक-ढाल () - CSS | MDN

अद्यतन: सभी ब्राउज़र RGBa का समर्थन नहीं करते हैं, इसलिए आपके पास 'फ़ॉलबैक रंग' होना चाहिए। यह रंग सबसे अधिक ठोस होगा (पूरी तरह से अपारदर्शी) पूर्व background:rgb(96, 96, 96):। RGBa ब्राउज़र समर्थन के लिए इस ब्लॉग का संदर्भ लें ।

Comments

इसके साथ कोई क्रॉस ब्राउज़र समस्याएँ?

— जॉन पी।

यदि हम अलग-अलग पृष्ठभूमि-छवि और यह निर्दिष्ट करना चाहते हैं तो संपत्ति क्या है?

— पेत्रुजा

@Petruza ऐसा लगता है कि हमारे पास इस सिंटैक्स का उपयोग करने के अलावा कोई विकल्प नहीं है। संदर्भ पढ़ें : "क्योंकि <ढाल> s <छवि> डेटा प्रकार से संबंधित हैं, उनका उपयोग केवल वहीं किया जा सकता है जहां <छवि> का उपयोग किया जा सकता है। इस कारण से, रैखिक-ढाल () पृष्ठभूमि-रंग पर काम नहीं करेगा। और अन्य गुण जो <color> data type "का उपयोग करते हैं

— Marco Panichi

Answer 2

का उपयोग करें: psuedo- तत्व के बाद:

.overlay {
    position: relative;
    transition: all 1s;
}

.overlay:after {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.5);
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.overlay:hover:after {
    opacity: 0;
}

मेरी कलम देखें>

http://codepen.io/craigocurtis/pen/KzXYad

Comments

विंडोज 10 पर फ़ायरफ़ॉक्स 47.0.1 में अच्छा लेकिन काम नहीं कर रहा है। लेकिन IE के साथ काम करता है। क्या आपके पास फ़ायरफ़ॉक्स के लिए कोई फिक्स है?

— जॉन मैक्स

@ जॉनमोक्स फ़ायरफ़ॉक्स अब ठीक काम कर रहा है। बस कुछ साल इंतजार करना होगा।

— क्रेग ओ। कर्टिस

Answer 3

स्थापना background-blend-modeके darkenउद्देश्य लेकिन आप एक सेट करना होगा प्राप्त करने के लिए सबसे प्रत्यक्ष और सबसे छोटा रास्ता होगा background-colorकाम करने के लिए मिश्रण मोड के लिए पहले।
यह भी सबसे अच्छा तरीका है अगर आपको बाद में जावास्क्रिप्ट में मूल्यों को हेरफेर करने की आवश्यकता है।

background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;

क्या मैं पृष्ठभूमि-मिश्रण के लिए उपयोग कर सकता हूं

Comments

किनारे या IE11 वास्तव में एक ब्राउज़र नहीं है

— स्टैकडेव

Answer 4

इसके साथ ऐसा करना संभव हो सकता है box-shadow

हालाँकि, मैं इसे वास्तव में एक छवि पर लागू नहीं कर सकता। केवल ठोस रंग की पृष्ठभूमि पर

body {
  background: #131418;
  color: #999;
  text-align: center;
}
.mycooldiv {
  width: 400px;
  height: 300px;
  margin: 2% auto;
  border-radius: 100%;
}
.red {
  background: red
}
.blue {
  background: blue
}
.yellow {
  background: yellow
}
.green {
  background: green
}
#darken {
  box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
  /*darkness level control - change the alpha value for the color for darken/ligheter effect */
}

Red
<div class="mycooldiv red"></div>
Darkened Red
<div class="mycooldiv red" id="darken"></div>
Blue
<div class="mycooldiv blue"></div>
Darkened Blue
<div class="mycooldiv blue" id="darken"></div>
Yellow
<div class="mycooldiv yellow"></div>
Darkened Yellow
<div class="mycooldiv yellow" id="darken"></div>
Green
<div class="mycooldiv green"></div>
Darkened Green
<div class="mycooldiv green" id="darken"></div>

Answer 5

आप अपनी पृष्ठभूमि के लिए एक कंटेनर का उपयोग कर सकते हैं, जिसे निरपेक्ष और नकारात्मक z-index के रूप में रखा गया है: http://jsfiddle.net/2YW7g/

एचटीएमएल

<div class="main">
    <div class="bg">         
    </div>
    Hello World!!!!
</div>

सीएसएस

.main{
    width:400px;
    height:400px;
    position:relative;
    color:red;
    background-color:transparent;
    font-size:18px;
}
.main .bg{
    position:absolute;
      width:400px;
    height:400px;
    background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
    z-index:-1;
}

.main:hover .bg{
    opacity:0.5;
}

Answer 6

बस यहाँ पहले से ही जोड़ने के लिए, निम्नलिखित का उपयोग करें:

background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");

... एक 70% रैखिक ढाल ओवरले के क्रॉस-ब्राउज़र समर्थन के लिए। छवि को चमकदार के लिए, आप उन सभी को बदल सकते हैं 0,0,0'में एस 255,255,255एस'। यदि 70% थोड़ा अधिक है, तो आगे बढ़ें और बदलें .7। और, भविष्य के संदर्भ के लिए इसे देखें: http://www.colorzilla.com/gradient-editor/

Answer 7

जब आप पृष्ठभूमि-रंग की चमक या गहरा करना चाहते हैं, तो आप इस css कोड का उपयोग कर सकते हैं

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

Comments

धन्यवाद, मुझे सीएसएस फिल्टर के बारे में नहीं पता था । यदि यह किसी की मदद करता है, तो यहां मैं कैन स्टेटस (मार्च, 2020) का उपयोग कर सकता हूं ।

— रीड डंकल

Answer 8

मेरे लिए फ़िल्टर / ग्रेडिएंट एप्रोच काम नहीं किया (शायद मौजूदा CSS के कारण) इसलिए मैंने :beforeइसके बजाय छद्म स्टाइलिंग ट्रिक का उपयोग किया है:

.eventBannerContainer {
    position: relative;
}
.eventBannerContainer:before {
    background-color: black;
    height: 100%;
    width: 100%;
    content: "";
    opacity: 0.5;
    position: absolute;
    display: block;
}
/* make any immediate child elements above our darkening mask */
.eventBannerContainer > * {
    position: relative;
}

Comments

क्योंकि डिफ़ॉल्ट displayके लिए ::beforeहै inlineइसे स्वीकार नहीं करेंगे widthऔर height।

— 20

धन्यवाद @connexo, ऐसा लगता है कि प्रासंगिक शैलियों की नकल करते समय मैंने इसे याद किया।

— डैनियल सोकोलोस्की