Wie kann ich die Breite der Hintergrundfarbe eines div einstellen? - html, CSS

ich habe zwei <div>s mit derselben Hintergrundfarbe. Wie wird die Breite des Hintergrunds eingestellt?

Erwartetes Ergebnis:

Hier ist HTML:

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

Was ich mit CSS versucht habe:

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

jsFiddle, Na sicher.

Ist es möglich, dies zu tun, außer der Einstellung width von einem div?

Antworten:

5 für die Antwort № 1

Sie können Hintergrundverläufe mit harten Stopps verwenden.

http://jsfiddle.net/isherwood/ZWrmn

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

---

1 für die Antwort № 2

Sie können es nicht mit einem einfachen tun background-color, aber Sie können es mit einem CSS-Farbverlauf tun.

background-color wird immer als einfarbig behandeltdas gesamte Element, aber Farbverläufe werden als Bilder behandelt und können in der Größe geändert werden. Sie können auch andere Schritte mit Farbverläufen ausführen, z. B. das Schichten mehrerer Farbverläufe, was mit einem einfachen Vorgang nicht möglich ist background-color.

---

1 für die Antwort № 3

Ich würde ein 1px-Bild als Hintergrundbild verwenden background: url(1px.png) repeat-y; dann kannst du einstellen background-size:75%; so wie es jetzt aussieht. Das Leben einfacher und weniger / einfacher Code machen.

---

0 für die Antwort № 4

Sie können Farbverlauf verwenden:

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-Gradientengenerator

jsfiddle

---

0 für die Antwort № 5

Sie sollten Ihre CSS ändern in:

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

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

---