不同的背景顏色爲左和右一半的div

我有一個居中的div佈局。背景中div的左側應該是白色的，右側應該是綠色的。兩者都應該延伸到無限。不同的背景顏色爲左和右一半的div

我認爲它應該很簡單，但我現在不明白。任何簡單的方法謝謝！

----------------------------------------------------- 
(div 1)  __________________________ 
      |(div 2)   |   | 
      |    |   | 
      |    |   | 
<- white |  white  | green | green -> 
      |    |   | 
      |    |   | 
      |________________|_________| 

------------------------------------------------------

來源

2009-08-14 Christoph

如果您在doctype.com上詢問，您可能會得到一些進一步的建議 – 2009-08-14 11:41:55

與兩種顏色添加背景圖片到外層div並允許瀏覽器縮放（而不是平鋪它）。

每種顏色應該完全填充圖像寬度的50％，以確保顏色永遠不會泄漏到任何一邊。

甚至可能將圖像置於內部div的後面。

的想法如何拉伸圖像，看到了這個問題：CSS Background Repeat

來源

2009-08-14 11:26:43

謝謝，工作很酷！甚至不知道你可以拉伸bg圖像。 – Christoph 2009-08-14 12:32:11

我把該分區其他兩個div的內部，給予他們適當的大小和顏色backgound

來源

2009-08-14 11:22:31

居中的div2已經在其他div1中。它通過使用margin：auto來居中。我不認爲我可以在其中放置另外兩個div嗎？ – Christoph 2009-08-14 11:28:09

當然可以。您將需要添加更多的div或處理重複的背景圖像，爲您做顏色更改。 – YetAnotherDeveloper 2009-08-14 11:36:01

你可以在外面兩個div，然後在每個你的div之一。分別右對齊和左對齊。像這樣：

----------------------------------------------------- 
(div)      | (div) 
      _________________|_________ 
      |(div)   | (div) | 
      |    |   | 
      |    |   | 
<- white |  white  | green | green -> 
      |    |   | 
      |    |   | 
      |________________|_________| 
          | 
------------------------------------------------------

來源

2009-08-14 11:27:56

但是，這隻適用於兩個外部div之間的線恰好在屏幕的50％（它不在我的佈局中）？ – Christoph 2009-08-14 11:35:54

使用::after和::before僞元素。這樣，你甚至可以得到三種顏色，並做意大利國旗！

div { 
    height:300px; 
    width:100%; 
    outline:thin solid black; 
    position:relative; 
    background:white; 
} 
div::after, div::before { 
    height:300px; 
    content:' '; 
    position: absolute; 
    top: 0; 
    width: 33%; 
} 
div::after { 
    right: 0; 
    background-color: red; 
} 
div::before { 
    left: 0; 
    background-color: green; 
}

這裏有一個小提琴：http://jsfiddle.net/g8p9pn1v/

，其結果： enter image description here

來源

2014-09-05 20:32:59

如何創建兩個div BG-左和BG-權，全寬容器內的絕對位置。由於它們是絕對定位的，因此您可以將內容疊加在它們上面。因此，例如，使用引導標記：

<div class="fullwidth"> 
    <div class="bg-left"></div> 
    <div class="bg-right"></div>  

    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-6"> 
       Insert left side content here... 
      </div> 
      <div class="col-xs-6"> 
       Insert right side content here... 
      </div> 
     </div> 
    </div> 
</div>

然後你的CSS：

.fullwidth { 
    position: relative; 
    width: 100%; 
} 
.bg-left { 
    background: #000; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
    width: 50%; 
} 
.bg-right { 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: #ddd; 
    position: absolute; 
    width: 50%; 
}

來源

2015-05-01 17:58:42 joncjordan

您可以使用梯度。這是一個網站，您可以從中獲得所需的跨瀏覽器代碼。

http://colorzilla.com/gradient-editor/

它可能是一個有點混亂，在開始時使用，但我覺得這是一個非常強大的工具。

問候！

來源

2015-06-18 19:56:44 eyyo

不同的背景顏色爲左和右一半的div

回答

相關問題