blocks|key|1333601|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333602|background:red+url(../images/samle.jpg)+no-repeat+left+top;|code-block|syntax|javascript|1333603|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>use </p>

<pre><code>background:red url(../images/samle.jpg) no-repeat left top;
</code></pre>


blocks|key|1333681|text|要添加到this+answer，请确保图像本身具有透明的背景。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1333682|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/903659/why-i-cant-use-background-image-and-color-together/903665#903665^0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>And to add to <a href="https://stackoverflow.com/questions/903659/why-i-cant-use-background-image-and-color-together/903665#903665">this</a> answer, make sure the image itself has a transparent background.</p>


blocks|key|1333746|text|使图像的一半透明，这样背景颜色就可以透过它看到。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333747|否则，只需添加另一个div，占据容器div的50%25，并将其向左或向右浮动。然后将图像或颜色应用于它。|1333748|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Make half of the image transparent so the background colour is seen through it.</p>

<p>Else simply add another div taking up 50% up the container div and float it either left or right. Then apply either the image or the colour to it.</p>


blocks|key|1333801|text|同时使用颜色和图像作为元素的背景是完全可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333802|您可以设置background-color和background-image样式。如果图像比元素小，则需要使用background-position样式将其放在右侧，并使用background-repeat样式防止重复和覆盖整个背景：|offset|length|style|CODE|1333803|background-color:+green;
background-image:+url(images/shadow.gif);
background-position:+right;
background-repeat:+no-repeat;|code-block|syntax|javascript|1333804|或者使用复合样式background|1333805|background:+green+url(images/shadow.gif)+right+no-repeat;|1333806|如果使用复合样式background分别设置这两个样式，则只使用最后一个样式，这可能是颜色不可见的原因之一：|1333807|background:+green;+/*+will+be+ignored+*/
background:+url(images/shadow.gif)+right+no-repeat;|1333808|没有办法特别限制背景图像只覆盖元素的一部分，因此您必须确保图像比元素小，或者它有任何透明区域，以使背景颜色可见。|1333809|entityMap^0|0|5|G|M|G|1J|J|2E|H|0|0|8|A|0|0|8|A|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]|$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|S|3|T|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1H|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|X|$]]

<p>It's perfectly possible to use both a color and an image as background for an element.</p>

<p>You set the <code>background-color</code> and <code>background-image</code> styles. If the image is smaller than the element, you need to use the <code>background-position</code> style to place it to the right, and to keep it from repeating and covering the entire background you use the <code>background-repeat</code> style:</p>

<pre><code>background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
</code></pre>

<p>Or using the composite style <code>background</code>:</p>

<pre><code>background: green url(images/shadow.gif) right no-repeat;
</code></pre>

<p>If you use the composite style <code>background</code> to set both separately, only the last one will be used, that's one possible reason why your color is not visible:</p>

<pre><code>background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;
</code></pre>

<p>There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.</p>


blocks|key|1333852|text|要对图像进行染色，可以使用CSS3+background堆叠图像和linear-gradient。在下面的例子中，我使用了一个没有实际渐变的linear-gradient。浏览器将渐变视为图像(我认为它实际上生成了一个位图并将其覆盖)，因此，实际上是在堆叠多个图像。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1333853|background:+linear-gradient(0deg,+rgba(2,173,231,0.5),+rgba(2,173,231,0.5)),+url(images/mba-grid-5px-bg.png)+repeat;|code-block|syntax|javascript|1333854|如果你有png，将会产生一个浅蓝色的图表纸。请注意，堆叠顺序可能与您的心理模型相反，第一个项目在顶部。|1333855|Mozilla的优秀文档，请访问：|1333856|https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds|1333857|用于构建渐变的工具：|1333858|http://www.colorzilla.com/gradient-editor/|1333859|注意--在IE11中不起作用！当我发现原因时，我会更新的，因为这是应该的。|1333860|entityMap|0|LINK|mutability|MUTABLE|url|1^0|I|A|X|F|1Y|F|0|0|0|0|0|29|0|0|0|0|16|1|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1D|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|Q|3|R|5|6|7|1I|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|U|3|V|5|6|7|1N|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|P]]|13|$5|Z|10|11|E|$12|T]]]]

<p>To tint an image, you can use CSS3 <code>background</code> to stack images and a <code>linear-gradient</code>. In the example below, I use a <code>linear-gradient</code> with no actual gradient. The browser treats gradients as images (I think it actually generates a bitmap and overlays it) and thus, is actually stacking multiple images.</p>

<pre><code>background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;
</code></pre>

<p>Will yield a graph-paper with light blue tint, if you had the png. Note that the stacking order might work in reverse to your mental model, with the first item being on top.</p>

<p>Excellent documentation by Mozilla, here:</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds</a></p>

<p>Tool for building the gradients:</p>

<p><a href="http://www.colorzilla.com/gradient-editor/" rel="noreferrer">http://www.colorzilla.com/gradient-editor/</a></p>

<p>Note - doesn't work in IE11! I'll post an update when I find out why, since its supposed to.</p>


blocks|key|1333870|text|background:url(directoryName/imageName.extention)+bottom+left+no-repeat;+
background-color:+red;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1333871|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;
</code></pre>


blocks|key|1333914|text|下面是一起使用background-image和background-color的示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1333915|​|1333916|.box+{
++background-image:+repeating-linear-gradient(+-45deg,+rgba(255,+255,+255,+.2),+rgba(255,+255,+255,+.2)+15px,+transparent+15px,+transparent+30px);
++width:+100px;
++height:+100px;
++margin:+10px+0+0+10px;
++display:+inline-block;
}|code-block|syntax|javascript|1333917|<div+class="box"+style="background-color:orange"></div>
<div+class="box"+style="background-color:green"></div>
<div+class="box"+style="background-color:blue"></div>|1333918|1333919|entityMap^0|7|G|O|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>Here's an example of using <code>background-image</code> and <code>background-color</code> together:</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>.box {
  background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
  display: inline-block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box" style="background-color:orange"&gt;&lt;/div&gt;
&lt;div class="box" style="background-color:green"&gt;&lt;/div&gt;
&lt;div class="box" style="background-color:blue"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1333977|text|大家好，我尝试了另一种将背景图像和背景颜色结合在一起的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333978|HTML|1333979|<article><canvas+id="color"></canvas></article>|code-block|syntax|javascript|1333980|CSS|1333981|article+{
++height:+490px;
++background:+url("Your+IMAGE")+no-repeat+center+cover;
++opacity:1;
}+

canvas{
++width:+100%25;+
++height:+490px;+
++opacity:+0.9;
}|1333982|JAVASCRIPT|1333983|window.onload+=+init();

var+canvas,+ctx;

function+init(){
++canvas+=+document.getElementeById('color');+
++ctx+=+canvas.getContext('2d');+
++ctx.save();++
++ctx.fillstyle+=+'#00833d';+
++ctx.fillRect(0,0,490,490);ctx.restore();
}|1333984|请让我知道它是否对你有效，谢谢|1333985|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Hello everyone I tried another way to combine background-image and background-color together:</p>

<p>HTML</p>

<pre><code>&lt;article&gt;&lt;canvas id="color"&gt;&lt;/canvas&gt;&lt;/article&gt;
</code></pre>

<p>CSS</p>

<pre><code>article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}
</code></pre>

<p>JAVASCRIPT</p>

<pre><code>window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}
</code></pre>

<p>Please let me know if it worked for you
Thanks</p>


blocks|key|1549493|text|实际上，有一种方法可以将背景颜色用于背景图像。在这种情况下，背景部分将使用指定的颜色填充，而不是白色/透明颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549494|为了实现这一点，您需要像这样设置background属性：|offset|length|style|CODE|1549495|.bg-image-with-color+{
++++background:+url("example.png")+no-repeat,+#ff0000;
}|code-block|syntax|javascript|1549496|注意no-repeat后面的逗号和颜色代码；这将设置您想要的背景颜色。|1549497|我在this+YouTube+video中发现了这一点，但我与该频道或视频没有任何关联。|1549498|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=bJ9NIGX4zRM^0|0|G|A|0|0|2|9|0|2|I|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Actually there is a way you can use a background color with a background image. In this case, the background part will be filled with that specified color instead of a white/transparent one.</p>

<p>In order to achieve that, you need to set the <code>background</code> property like this:</p>

<pre><code>.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}
</code></pre>

<p>Note the comma and the color code after <code>no-repeat</code>; this sets the background color you wish.</p>

<p>I discovered this in <a href="https://www.youtube.com/watch?v=bJ9NIGX4zRM" rel="nofollow noreferrer">this YouTube video</a>, however I'm not affiliated with that channel or video in any means.</p>


<p>What I am trying to do is to show both <code>background-color</code> and <code>background-image</code>, so that half of my <code>div</code> will cover the right shadow background image, and the other left part will cover the background color.</p>

<p>But when I use <code>background-image</code>, the color disappears.</p>


Why can't I use background image and color together?

我想要做的是同时显示background-color和background-image，这样我的div的一半将覆盖右边的阴影背景图像，而另一部分将覆盖背景颜色。但是当我使用background-image时，颜色就消失了。

问为什么我不能同时使用背景图片和颜色？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我不能同时使用背景图片和颜色？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我不能同时使用背景图片和颜色？
EN