พยายามที่จะบรรลุพื้นหลังในหน้าเว็บที่ "แยกเป็นสอง"; มีสองสีที่อยู่ฝั่งตรงข้าม (ดูเหมือนจะทำได้โดยการตั้งค่าเริ่มต้น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คุณสมบัติปกติหรือไม่

สนับสนุนเบราว์เซอร์รุ่นเก่า

หากต้องรองรับเบราว์เซอร์รุ่นเก่าคุณจึงไม่สามารถใช้พื้นหลังหรือการไล่ระดับสีหลายแบบได้คุณอาจต้องการทำสิ่งนี้ในdivองค์ประกอบสำรอง:

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

ตัวอย่าง: http://jsfiddle.net/PLfLW/1704/

วิธีการแก้ปัญหาใช้ div คงที่พิเศษที่เติมครึ่งหน้าจอ เนื่องจากได้รับการแก้ไขแล้วจะยังคงอยู่ในตำแหน่งแม้เมื่อผู้ใช้ของคุณเลื่อน คุณอาจต้องทำซ้ำกับดัชนี z ในภายหลังเพื่อให้แน่ใจว่าองค์ประกอบอื่น ๆ ของคุณอยู่เหนือ 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%ในตัวอย่างหลัง นี่คือเพื่อให้แน่ใจว่าแม้ว่าเนื้อหาของคุณจะเล็กกว่าหน้าพื้นหลังจะมีความสูงอย่างน้อยของวิวพอร์ตของผู้ใช้ หากไม่มีความสูงที่ชัดแจ้งเอฟเฟกต์พื้นหลังจะลงไปถึงเนื้อหาของหน้าเว็บของคุณเท่านั้น นอกจากนี้ยังเป็นเพียงการปฏิบัติที่ดีโดยทั่วไป

วิธีง่ายๆในการบรรลุพื้นหลัง "แบ่งเป็นสอง":

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

คุณยังสามารถใช้องศาเป็นทิศทาง

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

คุณสามารถแยกแยะความแตกต่างได้ยากแทนการไล่ระดับสีเชิงเส้นโดยใส่สีที่สองเป็น 0%

ตัวอย่างเช่น

ไล่ระดับสี - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

ความแตกต่างอย่างหนัก - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

ดังนั้นนี่เป็นคำถามเก่าที่น่ากลัวซึ่งมีคำตอบที่ยอมรับแล้ว แต่ฉันเชื่อว่าคำตอบนี้จะถูกเลือกหากมันถูกโพสต์เมื่อสี่ปีที่แล้ว

ฉันแก้ไขสิ่งนี้อย่างหมดจดด้วย CSS และไม่มีองค์ประกอบพิเศษ DOM! ซึ่งหมายความว่าทั้งสองสีล้วน แต่เป็นสีพื้นหลังของ One ELEMENT ไม่ใช่สีพื้นหลังของสองสี

ฉันใช้การไล่ระดับสีและเนื่องจากฉันตั้งค่าการหยุดสีอย่างใกล้ชิดกันดูเหมือนว่าสีต่างกันและพวกมันไม่ผสมผสานกัน

นี่คือการไล่ระดับสีในไวยากรณ์ดั้งเดิม:

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

สี#74ABDDเริ่มต้นที่0%และยังคงเป็นที่#74ABDD49.9%

จากนั้นฉันบังคับให้ไล่ระดับสีเพื่อเปลี่ยนสีถัดไปของฉันภายใน0.2%องค์ประกอบความสูงสร้างสิ่งที่ดูเหมือนจะเป็นเส้นทึบมากระหว่างสองสี

นี่คือผลลัพธ์:

และนี่คือ JSFiddle ของฉัน!

มีความสุข!

นี้จะทำงานกับ CSS บริสุทธิ์

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

ทดสอบใน Chrome เท่านั้น

ในโครงการที่ผ่านมาที่ต้องรองรับ IE8 + และฉันประสบความสำเร็จโดยใช้รูปภาพที่เข้ารหัสในรูปแบบ data-url

ภาพคือ 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 หวังว่ามันจะช่วยให้ใครบางคน;)

ฉันใช้ไป:afterแล้วและมันใช้ได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด กรุณาตรวจสอบลิงค์ เพียงแค่ต้องระมัดระวังสำหรับ z-index เพราะหลังจากนั้นจะมีตำแหน่งที่แน่นอน

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

ลิงค์ซอ

คุณสามารถใช้:afterpseudo-selector เพื่อให้ได้สิ่งนี้แม้ว่าฉันไม่แน่ใจเกี่ยวกับความเข้ากันได้ย้อนหลังของตัวเลือกนั้น

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

ฉันใช้สิ่งนี้เพื่อการไล่ระดับสีที่แตกต่างกันสองแบบบนพื้นหลังของหน้า

ใช้กับรูปภาพของคุณ bg

แยกแนวตั้ง

background-size: 50% 100%

แยกแนวนอน

background-size: 100% 50%

ตัวอย่าง

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

อีกวิธีหนึ่งในการนำปัญหาของคุณไปใช้เพื่อป้อนหนึ่งบรรทัดภายใน div ของคุณ:

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>

ตัวเลือก bullet-Proof ที่ถูกต้องและเชิงความหมายมากที่สุดคือการใช้องค์ประกอบหลอกตำแหน่ง ( ::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/

นี่คือตัวอย่างที่จะทำงานบนเบราว์เซอร์ส่วนใหญ่
โดยทั่วไปคุณใช้สองสีพื้นหลังสีแรกเริ่มจาก 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/

หากคุณต้องการใช้linear-gradientกับความสูง 50%:

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