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

我有一个div，背景颜色是红色。现在我想让左边的80％保持红色，右边的部分保持20％不变色或透明。是否有可能只改变CSS而无需添加更多div或更改div的填充？我想让div保持它的原始大小。将div的背景颜色的80％设置为一种颜色

2013-08-21 JavaScripter

您可以使用渐变。 [这里]（http://www.colorzilla.com/gradient-editor/）是一个让你轻松的网站。 – Fuzzley

[CSS：设置背景颜色是窗口宽度的50％]的可能重复（http://stackoverflow.com/questions/8541081/css-set-a-background-color-which-is-50 -of-的宽度的最窗口） – GSerg

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

结果： enter image description here

来源

2013-08-21 03:31:27

我不认为你可以为一个DIV设置多个背景颜色，但你可以尝试：

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

，如果你并不需要的文本（或其他）走了过来这只会工作与绿色边框部分

来源

2013-08-21 03:30:55

不能使用填充来实现局部着色。一个div可以在背景中着色，这使得整个div被赋予给定的颜色。但你可以使用外部div来达到你想要的效果，或者使用css3pie来达到你想要的效果（特别是在IE 8及以下版本中）。它也有渐变选项。

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

来源

2013-08-21 03:40:23 Nisha

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

回答

相关问题