[英]Multiple background color for div
I have a div
我有一个div
<div class="test">
Some text
</div>
I would like to have different background color for the same div
by percent (Horizontal coloring) 我希望不同的背景颜色为相同的div
百分比 (水平着色)
-----------------------------
| 20% | 30% | 50% |
| Red | Yellow | Green |
-----------------------------
Is this possible with CSS? 这可能与CSS有关吗?
You can use CSS3 Gradients [1] to achieve such effect 您可以使用CSS3 Gradients [1]来实现此类效果
div {
background: linear-gradient(to right, #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%);
height: 400px;
}
You can create such gradients over here 你可以在这里创建这样的渐变
You can also use px
as a unit, along with %
if you are looking for static gradient widths 如果要查找静态渐变宽度,还可以使用px
作为单位,以及%
Demo (Please add browser-prefixes
if you are looking for a cross browser solution, I've not added all the rules in this demo) 演示 (如果您正在寻找跨浏览器解决方案,请添加browser-prefixes
,我没有在此演示中添加所有规则)
Demo 2 (Vertical Split, just change to right
to to bottom
) 演示2 (垂直分割,只是to right
to bottom
)
1. More on CSS3 Gradients 2. Browser Support 1. 有关CSS3 Gradients的更多信息 2. 浏览器支持
You could achieve this by using a gradient: 您可以使用渐变来实现此目的:
Either google it and create an own. 谷歌它并创建一个自己的。 Or use a generator like this: 或者使用这样的生成器:
http://www.colorzilla.com/gradient-editor/ http://www.colorzilla.com/gradient-editor/
which gives you the following css-code: 它为您提供以下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 */
You could create three descendant divs within the parent. 您可以在父级中创建三个后代div。 Absolutely position them, make the parent transparent, then give the three divs a z-index of 0 so they sit underneath the text, not on top. 绝对定位它们,使父透明,然后给三个div的z-index为0,使它们位于文本下方,而不是顶部。
This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. 这种渐进增强方法适用于支持CSS 2.1伪元素及其定位的所有浏览器。 No CSS3 support required 无需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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.