CSS: Đặt màu nền là 50% chiều rộng của cửa sổ

Question

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

tôi đã tìm ra một giải pháp nhưng tiếc là background-size tài sản không hoạt động trong IE7/8 mà 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%; 
} 

Kể từ khi nó chỉ là về màu sắc rắn có lẽ đó là một cách chỉ sử dụng tài sản background-color thông thường?

Answer 1

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

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

#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 bổ sung mà lấp đầy một nửa màn hình. Kể từ khi nó cố định, nó sẽ vẫn ở vị trí ngay cả khi người dùng của bạn cuộn. Bạn có thể phải fiddle với một số z-indexes sau này, để đảm bảo các yếu tố khác của bạn là trên div nền, nhưng nó không nên quá phức tạp.

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

---

Modern trình duyệt

Nếu 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 mà bạn có thể sử dụng:

Linear Gradient:

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

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

Điều này gây ra một cắt cứng ở mức 50% cho mỗi màu, do đó không phải là một "dốc" như tên của nó. Hãy thử thử 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 Backgrounds với nền-size:

Bạn có thể áp dụng một màu nền cho các yếu tố html, và sau đó áp dụng một background-image để các yếu tố body và sử dụng background-size thuộc tính để đặt nó thành 50% chiều rộng 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 các gradient 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 Ý: Chú ý rằng cả html và body yếu tố này được thiết lập để 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ỉ giảm theo nội dung trang của bạn. Nó cũng chỉ là một thực hành tốt nói chung.

Answer 2

này nên 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.

Answer 3

giải pháp đơn giản để đạt được "phân chia thành hai" nền:

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

Answer 4

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

Hình ảnh đã 2800x1px, một nửa của hình ảnh 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 tại đây JsFiddle. Hy vọng nó có thể giúp ai đó;)

Answer 5

Đây là một ví dụ mà sẽ làm việc 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ột trong những đầu tiên bắt đầu từ 0% và kết thúc ở mức 50% và điều thứ hai bắt đầu từ 51% và kết thúc ở mức 100%

Tôi đang sử dụng định 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 điều chỉnh khác nhau mà bạn có thể sử dụng http://www.colorzilla.com/gradient-editor/

Answer 6

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

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.

Answer 7

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

Dọc chia

background-size: 50% 100% 

ngang chia

background-size: 100% 50% 

Ví dụ

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

Answer 8

Tôi đã sử dụng :after và nó đang hoạt động trên tất cả các trình duyệt chính. hãy kiểm tra liên kết. chỉ cần cẩn thận cho chỉ mục z vì 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; 
     } 

fiddle link

Answer 9

Vì vậy, đây là một câu hỏi hết sức cũ mà đã có một 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ó thể đã được chọn mà nếu nó được đăng tải cách đây bốn năm.

Tôi đã giải quyết điều này hoàn toàn bằng CSS và không có ELEMENT EXTRA DOM! Điều này có nghĩa là hai màu hoàn toàn là màu nền của ONE ELEMENT chứ không phải màu nền của hai màu.

Tôi đã sử dụng độ dốc và, vì tôi đặt màu dừng lại gần nhau, có vẻ như màu sắc khác biệt và chúng không pha trộn.

Đây là gradient trong cú pháp bản địa:

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

Màu #74ABDD giá khởi điểm 0% và vẫn #74ABDD là 49.9%.

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

Dưới đây là kết quả:

Và here's my JSFiddle!

Hãy vui vẻ!

Answer 10

Bạn có thể làm cho một sự phân biệt cứng thay vì Linear Gradient bằng cách đặt màu sắc thứ hai là 0%

Ví dụ,

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

cứng phân biệt - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Answer 11

Một trong cách triển khai 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à các tùy chọn khác (ngang, đường chéo, v.v.), bạn có thể nhấp vào "Chạy đoạn mã" để xem mã 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>

Answer 12

Phần lớn chống đạn và tùy chọn ngữ nghĩa chính xác sẽ được sử dụng cố định ở vị trí pseudo-yếu tố (:after hoặc :before). Sử dụng kỹ thuật này đừng quên đặt z-index thành các phần tử bên trong vùng chứa. Ngoài ra, cần có quy tắc content:"" cho phần tử giả, 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; 
} 

Sống dụ: https://jsfiddle.net/xraymutation/pwz7t6we/16/