blocks|key|1267314|text|你真的不能-背景颜色完全应用于元素背景。让它们保持简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267315|您可以为背景定义一个具有清晰颜色边界的CSS渐变，例如|1267316|background:+-webkit-linear-gradient(left,+grey,+grey+30%25,+white+30%25,+white);|code-block|syntax|javascript|1267317|但目前只有少数浏览器支持这一点。请参阅http://jsfiddle.net/UES6U/2/|offset|length|1267318|(另请参阅http://www.webkit.org/blog/1424/css3-gradients/了解有关CSS3渐变的说明，包括锐化颜色边界技巧。)|1267319|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/UES6U/2/|1|http://www.webkit.org/blog/1424/css3-gradients/^0|0|0|0|J|S|0|0|5|1B|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>You can’t really — background colours apply to the entirely of element backgrounds. Keeps ’em simple.</p>

<p>You could define a CSS gradient with sharp colour boundaries for the background instead, e.g.</p>

<pre><code>background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
</code></pre>

<p>But only a few browsers support that at the moment. See <a href="http://jsfiddle.net/UES6U/2/" rel="noreferrer">http://jsfiddle.net/UES6U/2/</a></p>

<p>(See also <a href="http://www.webkit.org/blog/1424/css3-gradients/" rel="noreferrer">http://www.webkit.org/blog/1424/css3-gradients/</a> for an explanation CSS3 gradients, including the sharp colour boundary trick.)</p>


blocks|key|1267336|text|您只能使用一种颜色，但可以使用任意多个图像，格式如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267337|background:+[+<bg-layer>+,+]*+<final-bg-layer>|code-block|syntax|javascript|1267338|<bg-layer>+=+<bg-image>+%7C%7C+<bg-position>+[+/+<bg-size>+]?+%7C%7C+<repeat-style>+%7C%7C+<attachment>+%7C%7C+<box>{1,2}|offset|length|style|CODE|1267339|<final-bg-layer>+=+<bg-image>+%7C%7C+<bg-position>+[+/+<bg-size>+]?+%7C%7C+<repeat-style>+%7C%7C+<attachment>+%7C%7C+<box>{1,2}+%7C%7C+<background-color>|1267340|或background:+url(image1.png)+center+bottom+no-repeat,+url(image2.png)+left+top+no-repeat;|1267341|如果你需要更多的颜色，制作一个纯色的图像并使用它。我知道这不是你想听的，但我希望这能有所帮助。|1267342|格式来自http://www.css3.info/preview/multiple-backgrounds/|1267343|entityMap|0|LINK|mutability|MUTABLE|url|http://www.css3.info/preview/multiple-backgrounds/^0|0|0|0|2X|0|0|3P|0|1|2G|0|0|4|1E|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@$I|18|J|19|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@$I|1B|J|1C|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@$I|1F|J|1G|1|1H]]|A|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>You can only use one color but as many images as you want, here is the format:</p>

<pre><code>background: [ &lt;bg-layer&gt; , ]* &lt;final-bg-layer&gt;
</code></pre>

<p><code>&lt;bg-layer&gt; = &lt;bg-image&gt; || &lt;bg-position&gt; [ / &lt;bg-size&gt; ]? || &lt;repeat-style&gt; || &lt;attachment&gt; || &lt;box&gt;{1,2}</code></p>

<p><code>&lt;final-bg-layer&gt; = &lt;bg-image&gt; || &lt;bg-position&gt; [ / &lt;bg-size&gt; ]? || &lt;repeat-style&gt; || &lt;attachment&gt; || &lt;box&gt;{1,2} || &lt;background-color&gt;</code></p>

<p>or 
<code>background: url(image1.png) center bottom no-repeat, url(image2.png) left top no-repeat;</code></p>

<p>If you need more colors, make an image of a solid color and use it. I know it’s not what you want to hear, but I hope it helps.</p>

<p>The format is from <a href="http://www.css3.info/preview/multiple-backgrounds/" rel="nofollow">http://www.css3.info/preview/multiple-backgrounds/</a></p>


blocks|key|4954251|text|是的，这是可能的！您可以根据需要使用任意多的颜色和图像，以下是正确的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4954252|​|4954253|body{
/*+Its,+very+important+to+set+the+background+repeat+to:+no-repeat+*/
background-repeat:no-repeat;+

background-image:++
/*+1)+An+image++++++++++++++*/+url(http://lorempixel.com/640/100/nature/John3-16/),+
/*+2)+Gradient++++++++++++++*/+linear-gradient(to+right,+RGB(0,+0,+0),+RGB(255,+255,+255)),+
/*+3)+Color(using+gradient)+*/+linear-gradient(to+right,+RGB(110,+175,+233),+RGB(110,+175,+233));

background-position:
/*+1)+Image+position++++++++*/+0+0,+
/*+2)+Gradient+position+++++*/+0+100px,
/*+3)+Color+position++++++++*/+0+130px;

background-size:++
/*+1)+Image+size++++++++++++*/+640px+100px,
/*+2)+Gradient+size+++++++++*/+100%25+30px,+
/*+3)+Color+size++++++++++++*/+100%25+30px;
}|code-block|syntax|javascript|4954254|4954255|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Yes its possible! and you can use as many colors and images as you desire, here is the right way:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
/* Its, very important to set the background repeat to: no-repeat */
background-repeat:no-repeat; 

background-image:  
/* 1) An image              */ url(http://lorempixel.com/640/100/nature/John3-16/), 
/* 2) Gradient              */ linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)), 
/* 3) Color(using gradient) */ linear-gradient(to right, RGB(110, 175, 233), RGB(110, 175, 233));

background-position:
/* 1) Image position        */ 0 0, 
/* 2) Gradient position     */ 0 100px,
/* 3) Color position        */ 0 130px;

background-size:  
/* 1) Image size            */ 640px 100px,
/* 2) Gradient size         */ 100% 30px, 
/* 3) Color size            */ 100% 30px;
}</code></pre>
</div>
</div>
</p>


blocks|key|4954269|text|在这个LIVE+DEMO中，我通过使用:before+css选择器实现了这一点，这个选择器似乎工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4954270|​|4954271|.myDiv++{
position:+relative;+/*Parent+MUST+be+relative*/
z-index:+9;
background:+green;
++++
/*Set+width/height+of+the+div+in+'parent'*/++++
width:100px;
height:100px;
}


.myDiv:before+{
content:+"";
position:+absolute;/*set+'child'+to+be+absolute*/
z-index:+-1;+/*Make+this+lower+so+text+appears+in+front*/
+++
++++
/*You+can+choose+to+align+it+left,+right,+top+or+bottom+here*/
top:+0;+
right:0;
bottom:+60%25;
left:+0;
++++
++++
background:+red;
}|code-block|syntax|javascript|4954272|<div+class="myDiv">this+is+my+div+with+multiple+colours.+It+work's+with+text+too!</div>|4954273|4954274|我想我应该加上这一点，因为我觉得它可以很好地为某些东西的百分比条/视觉级别工作。|4954275|这还意味着，如果没有必要，您可以不创建多个div，并使此页面保持最新|4954276|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/37m4vw68/2/|1|https://developer.mozilla.org/en-US/docs/Web/CSS/::before^0|3|9|0|J|7|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]|$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1C|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1D|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|U|V|W|C|$X|10]]]]

<p>In this <a href="http://jsfiddle.net/37m4vw68/2/" rel="noreferrer">LIVE DEMO</a> i've achieved this by using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before" rel="noreferrer">:before</a> css selector which seems to work quite nicely.  </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.myDiv  {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
    
/*Set width/height of the div in 'parent'*/    
width:100px;
height:100px;
}


.myDiv:before {
content: "";
position: absolute;/*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
   
    
/*You can choose to align it left, right, top or bottom here*/
top: 0; 
right:0;
bottom: 60%;
left: 0;
    
    
background: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="myDiv"&gt;this is my div with multiple colours. It work's with text too!&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I thought i would add this as I feel it could work quite well for a percentage bar/visual level of something.</p>

<p>It also means you're not creating multiple divs if you don't have to, and keeps this page up-to-date</p>


blocks|key|1267365|text|如果有人需要一个具有不同颜色重复水平条纹的CSS背景，以下是我如何实现的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267366|​|1267367|body+{
++font-family:+'Lucida+Grande',+'Helvetica+Neue',+Helvetica,+Arial,+sans-serif;
++font-size:+13px;
}

.css-stripes+{
++margin:+0+auto;
++width:+200px;
++padding:+100px;
++text-align:+center;
++/*+For+browsers+that+do+not+support+gradients+*/
++background-color:+#F691FF;
++/*+Safari+5.1+to+6.0+*/
++background:+-webkit-repeating-linear-gradient(#F691FF,+#EC72A8);
++/*+Opera+11.1+to+12.0+*/
++background:+-o-repeating-linear-gradient(#F691FF,+#EC72A8);
++/*+Firefox+3.6+to+15+*/
++background:+-moz-repeating-linear-gradient(#F691FF,+#EC72A8);
++/*+Standard+syntax+*/
++background-image:+repeating-linear-gradient(to+top,+#F691FF,+#EC72A8);
++background-size:+1px+2px;
}|code-block|syntax|javascript|1267368|<div+class="css-stripes">Hello+World!</div>|1267369|1267370|JSfiddle|offset|length|1267371|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/a0zecdvf/^0|0|0|0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>In case someone needs a CSS background with different color repeating horizontal stripes, here is how I managed to achieve this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
}

.css-stripes {
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* For browsers that do not support gradients */
  background-color: #F691FF;
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Standard syntax */
  background-image: repeating-linear-gradient(to top, #F691FF, #EC72A8);
  background-size: 1px 2px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="css-stripes"&gt;Hello World!&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/a0zecdvf/" rel="nofollow noreferrer">JSfiddle</a></p>


blocks|key|3168822|text|您可以根据需要使用任意多的颜色和图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3168823|请注意，渲染背景图像的优先级是FILO，第一个指定的图像在顶层，最后一个指定的图像在底层(参见代码片段)。|3168824|​|3168825|#composition+{
++++width:+400px;
++++height:+200px;
++++background-image:
++++++++linear-gradient(to+right,+#FF0000,+#FF0000),+/*+gradient+1+as+solid+color+*/
++++++++linear-gradient(to+right,+#00FF00,+#00FF00),+/*+gradient+2+as+solid+color+*/
++++++++linear-gradient(to+right,+#0000FF,+#0000FF),+/*+gradient+3+as+solid+color+*/
++++++++url('http://lorempixel.com/400/200/');+/*+image+*/
++++background-repeat:+no-repeat;+/*+same+as+no-repeat,+no-repeat,+no-repeat+*/
++++background-position:
++++++++0+0,+/*+gradient+1+*/
++++++++20px+0,+/*+gradient+2+*/
++++++++40px+0,+/*+gradient+3+*/
++++++++0+0;+/*+image+position+*/
++++background-size:
++++++++30px+30px,
++++++++30px+30px,
++++++++30px+30px,
++++++++100%25+100%25;
}|code-block|syntax|javascript|3168826|<div+id="composition">
</div>|3168827|3168828|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You can use as many colors and images as you desire.</p>

<p>Please note that the priority with which the background images are rendered is FILO, the first specified image is on the top layer, the last specified image is on the bottom layer (see the snippet).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#composition {
    width: 400px;
    height: 200px;
    background-image:
        linear-gradient(to right, #FF0000, #FF0000), /* gradient 1 as solid color */
        linear-gradient(to right, #00FF00, #00FF00), /* gradient 2 as solid color */
        linear-gradient(to right, #0000FF, #0000FF), /* gradient 3 as solid color */
        url('http://lorempixel.com/400/200/'); /* image */
    background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */
    background-position:
        0 0, /* gradient 1 */
        20px 0, /* gradient 2 */
        40px 0, /* gradient 3 */
        0 0; /* image position */
    background-size:
        30px 30px,
        30px 30px,
        30px 30px,
        100% 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="composition"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I know how to specify multiple background images using CSS3 and modify how they are displayed using different options.</p>

<p>Currently I have a <code>&lt;div&gt;</code>, which needs to have a different color for about 30% of the width on the left side:</p>

<pre class="lang-css prettyprint-override"><code>div#content {
  background: url("./gray.png") repeat-y, white;
  background-size: 30%;
}
</code></pre>

<p>Instead of loading the image which is totally gray, how can I do this specifying the color, and without additional <code>&lt;div&gt;</code>s?</p>


Can I apply multiple background colors with CSS3?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我知道如何使用CSS3指定多个背景图像，以及如何使用不同的选项修改它们的显示方式。目前我有一个<div>，它需要有一个不同的颜色，大约30%的宽度在左侧：div#content {  background: url("./gray.png") repeat-y, white;  background-size: 30%...

问我可以在CSS3中应用多种背景颜色吗？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在CSS3中应用多种背景颜色吗？EN