सीएसएस: एक पृष्ठभूमि रंग सेट करें जो खिड़की की चौड़ाई का 50% है

Question

एक पृष्ठ पर एक पृष्ठभूमि प्राप्त करने की कोशिश कर रहा है जो "दो में विभाजित है"; विपरीत दिशा में दो रंग ( टैग background-colorपर एक डिफ़ॉल्ट सेट करके प्रतीत होता है body, फिर एक और divउस पर लागू करने से खिड़की की पूरी चौड़ाई खींचती है)।

मैं एक समाधान के साथ आया था, लेकिन दुर्भाग्य से background-sizeसंपत्ति IE7 / 8 में काम नहीं करती है जो इस परियोजना के लिए जरूरी है -

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

चूंकि यह सिर्फ ठोस रंगों के बारे में है, शायद केवल नियमित background-colorसंपत्ति का उपयोग करने का एक तरीका है?

Answer 1

पुराना ब्राउज़र समर्थन

यदि पुराना ब्राउज़र सपोर्ट जरूरी है, तो आप कई बैकग्राउंड या ग्रेडिएंट्स के साथ नहीं जा सकते, आप शायद कुछ ऐसा करना चाहते हैं, जैसे कि एक खाली divएलिमेंट:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

उदाहरण: http://jsfiddle.net/PLfLW/1704/

समाधान एक अतिरिक्त निश्चित div का उपयोग करता है जो आधी स्क्रीन को भरता है। चूंकि यह तय है, यह तब भी स्थिति में रहेगा जब आपके उपयोगकर्ता स्क्रॉल करेंगे। आपको बाद में कुछ z- इंडेक्स के साथ फील करना पड़ सकता है, यह सुनिश्चित करने के लिए कि आपके अन्य तत्व बैकग्राउंड डिव से ऊपर हैं, लेकिन यह बहुत जटिल नहीं होना चाहिए।

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

---

आधुनिक ब्राउज़र

यदि नए ब्राउज़र आपकी एकमात्र चिंता हैं, तो कुछ अन्य तरीके हैं जिनका आप उपयोग कर सकते हैं:

रैखिक ढलान:

यह निश्चित रूप से सबसे आसान उपाय है। आप विभिन्न प्रकार के प्रभावों के लिए शरीर की पृष्ठभूमि संपत्ति में एक रैखिक-ढाल का उपयोग कर सकते हैं।

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

यह प्रत्येक रंग के लिए 50% पर एक हार्ड कटऑफ का कारण बनता है, इसलिए नाम के रूप में "ढाल" नहीं है। विभिन्न प्रभावों को प्राप्त करने के लिए स्टाइल के "50%" टुकड़े के साथ प्रयोग करके देखें।

उदाहरण: http://jsfiddle.net/v14m59pq/2/

पृष्ठभूमि के आकार के साथ कई पृष्ठभूमि:

आप htmlतत्व के लिए एक पृष्ठभूमि रंग लागू कर सकते हैं , और फिर तत्व के लिए एक पृष्ठभूमि-छवि लागू कर सकते bodyहैं और background-sizeसंपत्ति का उपयोग करके इसे पृष्ठ की चौड़ाई के 50% तक सेट कर सकते हैं। यह एक समान प्रभाव में परिणाम देता है, हालांकि यदि आप एक छवि या दो का उपयोग कर रहे हैं तो वास्तव में केवल ग्रेडिएंट पर उपयोग किया जाएगा।

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

उदाहरण: http://jsfiddle.net/6vhshyxg/2/

---

अतिरिक्त नोट: ध्यान दें कि दोनों htmlऔर bodyतत्व height: 100%बाद के उदाहरणों में सेट हैं। यह सुनिश्चित करने के लिए है कि भले ही आपकी सामग्री पृष्ठ से छोटी हो, लेकिन पृष्ठभूमि उपयोगकर्ता के व्यूपोर्ट की ऊंचाई कम से कम होगी। स्पष्ट ऊंचाई के बिना, पृष्ठभूमि प्रभाव केवल आपके पृष्ठ की सामग्री के नीचे तक जाएगा। यह भी सामान्य रूप से सिर्फ एक अच्छा अभ्यास है।

Comments

धन्यवाद, इसने मुझे एक टेबल पर इस प्रभाव को प्राप्त करने में मदद की: jsfiddle.net/c9kp2pde

linear-gradient: कठिन कटऑफ भी पिक्सल के लिए काम करता हैbackground: linear-gradient(90deg, #FFC0CB 225px, #00FFFF 0, #00FFFF 100%);

— याकूब वैन Lingen

यह 50% 50% के साथ काम करता है, लेकिन यह तब काम नहीं करता है जब मैंने 25% 75% के साथ प्रतिस्थापित किया

— डेटोन्डहॉक

@datdinhquoc आज़माएं background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 0);।

— justisb

Answer 2

"दो में विभाजित" पृष्ठभूमि प्राप्त करने के लिए सरल समाधान:

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

आप दिशा के रूप में डिग्री का उपयोग भी कर सकते हैं

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

Comments

यह शांत है, लेकिन इसकी एक ढाल है। क्या एक कठिन भेद करना संभव है?

— जॉन गिओटा

Answer 3

आप 0% के लिए दूसरा रंग डालकर रैखिक ढाल के बजाय एक कठिन अंतर बना सकते हैं

उदाहरण के लिए,

ग्रेडिएंट - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

कठिन भेद - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Answer 4

तो, यह एक भयानक पुराना सवाल है जिसका पहले से ही एक स्वीकृत उत्तर है, लेकिन मेरा मानना ​​है कि इस उत्तर को चुना गया होगा, इसे चार साल पहले पोस्ट किया गया था।

मैंने इसे CSS के साथ पूरी तरह से हल किया है, और NO EXTRA DOM ELEMENTS के साथ! इसका मतलब यह है कि दो रंग विशुद्ध रूप से हैं, बस एक एलिमेंट का पृष्ठभूमि रंग, दो का पृष्ठभूमि रंग नहीं।

मैंने एक ढाल का उपयोग किया और, क्योंकि मैंने सेट किया है कि रंग एक साथ इतनी बारीकी से बंद हो जाता है, ऐसा लगता है जैसे कि रंग अलग हैं और वे मिश्रण नहीं करते हैं।

यहाँ मूल सिंटैक्स में ढाल है:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

रंग #74ABDDशुरू होता है 0%और अभी भी #74ABDDहै 49.9%।

फिर, मैं ढाल को 0.2%तत्वों की ऊंचाई के भीतर अपने अगले रंग में स्थानांतरित करने के लिए मजबूर करता हूं , जिससे दो रंगों के बीच एक बहुत ही ठोस रेखा दिखाई देती है।

यहाँ परिणाम है:

और यहाँ मेरा JSFiddle है!

मज़े करो!

Comments

एक भी इस पर पिक्सेल के साथ जा सकते हैं। background: repeating-linear-gradient(var(--grayLight), var(--grayLight) 430px, rgba(0,0,0,0) 201px, rgba(0,0,0,0) 100%);

— फिलिप

Answer 5

यह शुद्ध सीएसएस के साथ काम करना चाहिए।

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

केवल क्रोम में परीक्षण किया गया।

Answer 6

पिछले प्रोजेक्ट में जिसे IE8 + का समर्थन करना था और मैंने डेटा-यूआरएल प्रारूप में एन्कोडेड छवि का उपयोग करके इसे हासिल किया।

छवि 2800x1px थी, छवि सफेद का आधा, और आधा पारदर्शी। बहुत अच्छा काम किया।

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

आप इसे JsFiddle को यहां काम करते हुए देख सकते हैं । आशा है कि यह किसी की मदद कर सकता है;)

Answer 7

मैंने उपयोग किया है :afterऔर यह सभी प्रमुख ब्राउज़रों में काम कर रहा है। कृपया लिंक की जाँच करें। बस z- इंडेक्स के लिए सावधानी बरतने की जरूरत है क्योंकि स्थिति निरपेक्ष है।

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

फिडल लिंक

Answer 8

आप :afterइसे प्राप्त करने के लिए छद्म चयनकर्ता का उपयोग कर सकते हैं , हालांकि मैं उस चयनकर्ता की पिछड़ी संगतता के बारे में अनिश्चित हूं।

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

मैंने पेज बैकग्राउंड पर दो अलग-अलग ग्रेडिएंट्स का उपयोग किया है।

Comments

यह तकनीक सभी ब्राउज़रों में समर्थित है, महान समाधान! यदि आप निश्चित प्रभाव नहीं चाहते हैं, तो आप किसी रिश्तेदार माता-पिता के साथ एक पूर्ण स्थिति का उपयोग कर सकते हैं।

— एडम टी। स्मिथ

Answer 9

अपनी छवि bg पर प्रयोग करें

लंबवत विभाजन

background-size: 50% 100%

क्षैतिज विभाजन

background-size: 100% 50%

उदाहरण

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

Comments

मैं इस पृष्ठभूमि को केंद्र में कैसे सेट कर सकता हूं

— वैभव अहलपारा

कोशिश: background-position: center center

— जन रानोस्तज

Answer 10

अपने डिव के अंदर एक सिंगल लाइन इनपुट के लिए अपनी समस्या को लागू करने का एक तरीका है:

background-image: linear-gradient(90deg, black 50%, blue 50%);

यहां एक प्रदर्शन कोड और अधिक विकल्प (क्षैतिज, विकर्ण आदि) हैं, आप इसे लाइव देखने के लिए "रन कोड स्निपेट" पर क्लिक कर सकते हैं।

.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

Answer 11

सबसे बुलेट-प्रूफ और शब्दार्थ रूप से सही विकल्प निश्चित-तैनात छद्म तत्व ( ::afterया ::before) का उपयोग करना होगा । इस तकनीक का उपयोग z-indexकंटेनर के अंदर तत्वों को सेट करने के लिए मत भूलना । यह भी ध्यान रखें, content:""छद्म तत्व के लिए उस नियम की आवश्यकता होती है, अन्यथा इसका प्रतिपादन नहीं किया जाएगा।

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

लाइव उदाहरण: https://jsfiddle.net/xraymutation/pwz7t6we/16/

Answer 12

.background{
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
 height:200px;
 
}

.background2{
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);

 height:200px;
 
}

<html>
<body class="one">

<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>

Answer 13

यह एक उदाहरण है जो अधिकांश ब्राउज़रों पर काम करेगा।
मूल रूप से आप दो पृष्ठभूमि रंगों का उपयोग करते हैं, पहला 0% से शुरू होता है और 50% पर समाप्त होता है और दूसरा 51% से शुरू होता है और 100% पर समाप्त होता है

मैं क्षैतिज अभिविन्यास का उपयोग कर रहा हूं:

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

विभिन्न समायोजन के लिए आप http://www.colorzilla.com/gradient-editor/ का उपयोग कर सकते हैं

Answer 14

यदि आप linear-gradient50% ऊंचाई के साथ उपयोग करना चाहते हैं :

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;