div元素的多个背景颜色

Question

我有一个

元素

。

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

我希望同一个 div 可以通过 百分比 来实现不同的 背景颜色（水平渐变）。

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

这个用CSS可以实现吗？

- ddb

---

你想要渐变还是严格限定的颜色区域？ - Igl3

Answer 1

您可以使用CSS3渐变^[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渐变       2. 浏览器支持}

- Mr. Alien

---

你正在使用哪个CSS3生成器？ - Mohsen Safari

@Mohsen 刚刚分享了 :) - Mr. Alien

谢谢：），我以前用过，但不是这样。 - Mohsen Safari

@Mohsen 你看到的疯狂技巧 ;) - Mr. Alien

谢谢，我之前不知道 linear-gradient 可以这样使用。 - vogomatix

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 */

- Igl3

Answer 3

这种渐进增强的方法适用于所有支持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;
}

演示

- Pir Abdul

Answer 4

您可以在父元素内创建三个子 div。绝对定位它们，使父元素透明，然后将这三个 div 的 z-index 设为 0，这样它们就可以在文本下方而不是在其上方。

- Edward G-Jones