4

我有一个 div，背景颜色是红色。现在我想让左边的 80% 保持红色，右边的 20% 没有颜色或透明。是否可以只更改 css 而无需添加更多 div 或更改 div 的填充？我希望 div 保持原来的大小。

4

4 回答 4

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

结果： 在此处输入图像描述

于 2013-08-21T03:31:27.430 回答
0

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

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

仅当您不需要文本（或其他）越过带有绿色边框的部分时，这才有效

于 2013-08-21T03:30:55.120 回答
0

您不能使用填充来实现部分着色。一个 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-21T03:40:23.403 回答
0

资源是使用链接预加载预加载的，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的as值并且是有意预加载的。（索引）：6770 crbug/1173575，非 JS 模块文件已弃用。（匿名）@（索引）：6770（索引）：6770 crbug/1173575，不推荐使用非 JS 模块文件

于 2022-01-06T06:25:08.557 回答