将div的80％背景颜色设置为一种颜色

Question

我有一个div，背景颜色是红色。现在我想留下80％保持红色，在右边部分保持20％没有颜色或透明。是否可以仅在不添加更多div或更改div的填充的情况下更改css？我希望div保持它的原始尺寸。

Answer 1

.myClass
{
    background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 20%, rgba(255,48,48,1) 21%, rgba(255,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(20%,rgba(41,137,216,0)), color-stop(21%,rgba(255,48,48,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(41,137,216,0) 20%,rgba(255,48,48,1) 21%,rgba(255,0,0,1) 100%); /* W3C */
}

结果：

Answer 2

我认为您不能为一个div设置多种背景颜色，但您可以尝试：

div.twocolorish {
background-color: blue;
border-left: 20px solid green;
}

这只有在您不需要文本（或其他）覆盖绿色边框的部分时才有效

Answer 3

您不能使用填充来实现部分着色。 div可以在背景中着色，使整个div用给定的颜色着色。但是您可以使用外部div来获得所需的结果，或使用css3pie来获得所需的结果（尤其是在IE 8及更低版本中）。它也有渐变选项。

<div style="width:500px; height:400px; ">
   <div style="width:80%; height:100%; background-color:blue;">
   </div>
</div>