如何设置div背景色的宽度?

I have two <div>s with same background color. How to set the width of background?

我有两个

s，背景颜色相同。如何设置背景的宽度?

Expected result:

预期结果:

Here is HTML:

HTML:

<div>
    <span>100% width of background</span>
</div>
<div>
    <span>75% width of background</span>
</div>

What I tried to do using CSS:

我尝试使用CSS:

div {
    background-color: #fc0;
    margin: 2px;
}
div:last-child {
    background-size: 75%;
}

jsFiddle, of course.

当然,jsFiddle。

Is it posible to do this exept of setting width of a div?

它是否可以做一个div设置宽度的exept ?

5 个解决方案

#1

You can use background gradients with hard stops.

您可以使用硬停止的背景梯度。

http://jsfiddle.net/isherwood/ZWrmn

http://jsfiddle.net/isherwood/ZWrmn

div:last-child {
    background: linear-gradient(left, green 0, green 75%, transparent 75%);
}

#2

You can't do it with a simple background-color, but you can do it with a CSS gradient.

你不能用简单的背景色来做，但是你可以用CSS渐变来做。

background-color is always treated as a single plain colour for the entire element, but gradients are treated as images, and can be sized. You can also do other things with gradients, such as layering multiple gradients, which can't be done with a simple background-color.

背景色始终被视为整个元素的单一纯色，但渐变被视为图像，可以进行大小设置。您还可以使用渐变来做其他事情，比如层叠多个渐变，这不能用简单的背景色来完成。

#3

I would use a 1px image as background something like background: url(1px.png) repeat-y; then you can set background-size:75%; as it's image now. Making life easier and less/simple code as well.

我会使用1px的图像作为背景，比如背景:url(1px.png) repeat-y;然后可以设置背景尺寸:75%;作为现在的形象。让生活更简单，更少/简单的代码。

#4

you can use gradient:

您可以使用梯度:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(30,87,153,1) 0%, rgba(30,87,153,1) 69%, rgba(30,87,153,0) 70%, rgba(30,87,153,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(69%,rgba(30,87,153,1)), color-stop(70%,rgba(30,87,153,0)), color-stop(100%,rgba(30,87,153,0)));
background: -webkit-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -o-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -ms-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: linear-gradient(to right,  rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#001e5799',GradientType=1 );

CSS gradient generator

CSS梯度发电机

jsfiddle

jsfiddle

#5

U should change your css to :

你应该把你的css改为:

div {
    background-color: #fc0;
    margin: 2px;
}
 div:last-child {

      background-image: -webkit-linear-gradient(left, #fc0, #fc0 75%, transparent 75%,     transparent 100%)
}