Cố gắng đạt được một nền tảng trên một trang "chia làm hai"; hai màu ở hai bên đối diện (dường như được thực hiện bằng cách đặt mặc định background-colortrên bodythẻ, sau đó áp dụng màu khác lên trên một divdải trải dài toàn bộ chiều rộng của cửa sổ).

Tôi đã đưa ra một giải pháp nhưng không may là background-sizetài sản không hoạt động trong IE7 / 8, đây là điều bắt buộc đối với dự án này -

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

Vì đó chỉ là về màu sắc rắn, có lẽ có cách nào chỉ sử dụng background-colortài sản thông thường ?

Hỗ trợ trình duyệt cũ hơn

Nếu hỗ trợ trình duyệt cũ là bắt buộc, vì vậy bạn không thể đi với nhiều nền hoặc độ dốc, có lẽ bạn sẽ muốn làm một cái gì đó như thế này trên một divyếu tố dự phòng :

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

Ví dụ: http://jsfiddle.net/PLfLW/1704/

Giải pháp sử dụng một div cố định thêm lấp đầy một nửa màn hình. Vì nó đã được sửa, nó sẽ giữ nguyên vị trí ngay cả khi người dùng của bạn cuộn. Bạn có thể phải nghịch ngợm với một số chỉ mục z sau đó, để đảm bảo các yếu tố khác của bạn nằm trên div nền, nhưng nó không quá phức tạp.

Nếu bạn có vấn đề, chỉ cần đảm bảo phần còn lại của nội dung của bạn có chỉ số z cao hơn yếu tố nền và bạn sẽ ổn.

Trình duyệt hiện đại

Nếu các trình duyệt mới hơn là mối quan tâm duy nhất của bạn, có một vài phương pháp khác bạn có thể sử dụng:

Gradient tuyến tính:

Đây chắc chắn là giải pháp dễ nhất. Bạn có thể sử dụng một gradient tuyến tính trong thuộc tính nền của cơ thể cho nhiều hiệu ứng.

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

Điều này gây ra mức cắt cứng ở mức 50% cho mỗi màu, do đó không có "độ dốc" như tên gọi của nó. Hãy thử trải nghiệm với phần "50%" của phong cách để xem các hiệu ứng khác nhau mà bạn có thể đạt được.

Ví dụ: http://jsfiddle.net/v14m59pq/2/

Nhiều hình nền với kích thước nền:

Bạn có thể áp dụng màu nền cho thành htmlphần, sau đó áp dụng hình nền cho thành bodyphần đó và sử dụng thuộc background-sizetính để đặt thành 50% chiều rộng của trang. Điều này dẫn đến một hiệu ứng tương tự, mặc dù thực sự sẽ chỉ được sử dụng trên độ dốc nếu bạn tình cờ sử dụng một hoặc hai hình ảnh.

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

Ví dụ: http://jsfiddle.net/6vhshyxg/2/

EXTRA LƯU Ý: Lưu ý rằng cả phần tử htmlvà bodyphần tử được đặt thành height: 100%trong các ví dụ sau. Điều này là để đảm bảo rằng ngay cả khi nội dung của bạn nhỏ hơn trang, nền sẽ ít nhất là chiều cao của chế độ xem của người dùng. Nếu không có chiều cao rõ ràng, hiệu ứng nền sẽ chỉ đi xuống đến tận nội dung trang của bạn. Nó cũng chỉ là một thực hành tốt nói chung.

Giải pháp đơn giản để đạt được nền "chia làm hai":

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

Bạn cũng có thể sử dụng độ như hướng

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

Bạn có thể phân biệt cứng thay vì gradient tuyến tính bằng cách đặt màu thứ hai về 0%

Ví dụ,

Dốc - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

Phân biệt khó khăn - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Vì vậy, đây là một câu hỏi hết sức cũ đã có câu trả lời được chấp nhận, nhưng tôi tin rằng câu trả lời này đã được chọn nếu nó được đăng bốn năm trước.

Tôi đã giải quyết vấn đề này hoàn toàn bằng CSS và KHÔNG CÓ PHẦN MỀM EXTRA DOM! Điều này có nghĩa là hai màu hoàn toàn là màu nền, chỉ là màu nền của MỘT PHẦN, chứ không phải màu nền của hai.

Tôi đã sử dụng một gradient và, vì tôi đặt các màu dừng lại rất gần nhau, trông như thể các màu khác biệt và chúng không hòa trộn.

Đây là gradient trong cú pháp riêng:

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

Màu #74ABDDgiá khởi điểm 0%và vẫn còn #74ABDDtại 49.9%.

Sau đó, tôi buộc gradient chuyển sang màu tiếp theo của tôi trong 0.2%chiều cao của các phần tử, tạo ra thứ dường như là một đường rất chắc chắn giữa hai màu.

Đây là kết quả:

Và đây là JSFiddle của tôi!

Chúc vui vẻ!

điều này sẽ làm việc với css tinh khiết.

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

chỉ được thử nghiệm trong Chrome.

Trong một dự án trước đây phải hỗ trợ IE8 + và tôi đã đạt được điều này bằng cách sử dụng một hình ảnh được mã hóa ở định dạng url dữ liệu.

Hình ảnh có kích thước 2800x1px, một nửa hình ảnh màu trắng và một nửa trong suốt. Làm việc khá tốt.

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

Bạn có thể thấy nó hoạt động ở đây JsFiddle . Hy vọng nó có thể giúp được ai đó;)

Tôi đã sử dụng :aftervà nó đang hoạt động trong tất cả các trình duyệt chính. vui lòng kiểm tra liên kết. chỉ cần cẩn thận cho chỉ số z là sau khi có vị trí tuyệt đối.

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

liên kết fiddle

Bạn có thể sử dụng :afterbộ chọn giả để đạt được điều này, mặc dù tôi không chắc về khả năng tương thích ngược của bộ chọn đó.

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

Tôi đã sử dụng điều này để có hai độ dốc khác nhau trên nền trang.

Sử dụng trên hình ảnh của bạn bg

Chia dọc

background-size: 50% 100%

Tách ngang

background-size: 100% 50%

Thí dụ

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

Một trong những cách để thực hiện vấn đề của bạn để nhập một dòng duy nhất bên trong div của bạn:

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

Dưới đây là mã trình diễn và nhiều tùy chọn hơn (ngang, chéo, v.v.), bạn có thể nhấp vào "Chạy đoạn mã" để xem trực tiếp.

.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>

Tùy chọn chống đạn và chính xác nhất về mặt ngữ nghĩa sẽ là sử dụng phần tử giả định vị cố định ( ::afterhoặc ::before). Sử dụng kỹ thuật này đừng quên thiết lập z-indexcác yếu tố bên trong container. Cũng cần lưu ý, content:""quy tắc đó cho phần tử giả là cần thiết, nếu không nó sẽ không được hiển thị.

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

Ví dụ trực tiếp: https://jsfiddle.net/xraymuting/pwz7t6we/16/

Đây là một ví dụ sẽ hoạt động trên hầu hết các trình duyệt.
Về cơ bản, bạn sử dụng hai màu nền, màu thứ nhất bắt đầu từ 0% và kết thúc ở mức 50% và màu thứ hai bắt đầu từ 51% và kết thúc ở mức 100%

Tôi đang sử dụng hướng ngang:

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

Đối với các điều chỉnh khác nhau, bạn có thể sử dụng http://www.colorzilla.com/gradient-editor/

nếu bạn muốn sử dụng linear-gradientvới 50% chiều cao:

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