div的多種背景顏色

Question

我有一個div

<div class="test">
   Some text
</div>

我希望不同的背景顏色為相同的div 百分比 （水平着色）

-----------------------------
| 20%   |  30%   | 50%      |
| Red   | Yellow | Green    |
-----------------------------

這可能與CSS有關嗎？

Answer 1

您可以使用CSS3 Gradients ^[1]來實現此類效果

div {
    background: linear-gradient(to right,  #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%);
    height: 400px;
}

演示

你可以在這里創建這樣的漸變

---

如果要查找靜態漸變寬度，還可以使用px作為單位，以及%

演示 ^{（如果您正在尋找跨瀏覽器解決方案，請添加browser-prefixes ，我沒有在此演示中添加所有規則）}

演示2 （垂直分割，只是to right to bottom ）

^{1. 有關CSS3 Gradients的更多信息 2. 瀏覽器支持}

Answer 2

您可以使用漸變來實現此目的：

谷歌它並創建一個自己的。 或者使用這樣的生成器：

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

它為您提供以下css代碼：

background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(left,  #ff3019 0%, #d40000 20%, #f2f600 20%, #f2f600 50%, #1e7a00 50%, #1e7a00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(20%,#d40000), color-stop(20%,#f2f600), color-stop(50%,#f2f600), color-stop(50%,#1e7a00), color-stop(100%,#1e7a00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* IE10+ */
background: linear-gradient(to right,  #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#1e7a00',GradientType=1 ); /* IE6-9 */

Answer 3

您可以在父級中創建三個后代div。 絕對定位它們，使父透明，然后給三個div的z-index為0，使它們位於文本下方，而不是頂部。

Answer 4

這種漸進增強方法適用於支持CSS 2.1偽元素及其定位的所有瀏覽器。 無需CSS3支持

#div{
   position:relative;
   z-index:1;
   min-width:200px;
   min-height:200px;
   padding:120px 200px 50px;
   background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}
#div:before,
#div:after {
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   padding-top:100px;
}

DEMO