为什么我不能一起使用背景图像和颜色？

140

我想要做的是显示background-color和background-image，这样我的div的一半将覆盖右侧的阴影背景图像，另一个左侧部分将覆盖背景颜色。为什么我不能一起使用背景图像和颜色？

但是当我使用background-image时，颜色消失。

2009-05-24 Yasir

什么是你的CSS代码？ – outis 2009-05-24 12:23:20

257

完全可以将颜色和图像用作元素的背景。

您设置了background-color和background-image样式。如果图像比元素小，你需要使用background-position风格将其放置到右边，并保持它的重复和覆盖整个背景使用background-repeat风格：

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

或者使用复合式的background：

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

如果使用复合风格background同时设置独立，只有最后一个将被使用，这是一个可能的原因，为什么你的颜色是不可见的：

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

无法专门限制背景图像以仅覆盖元素的一部分，因此您必须确保图像小于元素或具有任何透明区域以用于背景颜色可见。

来源

2009-05-24 13:30:13 Guffa

使用

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

来源

2009-05-24 12:23:48

，并增加this答案，确保图像本身具有透明背景。

来源

2009-05-24 12:36:14

好的补充。这发生在我身上时，我用一个.jpg而不是一个.png – corbin 2013-04-24 17:13:03

不要发表这个作为na回答更好作为评论。 – 2015-09-05 23:40:59

你是从什么时候见到的？！实际上是创始人的几代人。这是狂野的西部，没有规则。你们的新手把它们都放在了金色的盘子上;-) – 2015-09-08 23:08:11

使图像的一半透明，以便通过它看到背景颜色。

否则只需添加另一个div，占用容器div的50％，然后将其左右浮动。然后应用图像或颜色。

来源

2009-05-24 13:05:17

这里假设你的背景图像和包含div一样大。 – 2009-05-24 14:01:44

要为图像着色，可以使用CSS3 background堆叠图像和linear-gradient。在下面的例子中，我使用了没有实际渐变的linear-gradient。浏览器将渐变视为图像（我认为它实际上会生成一个位图并覆盖它），因此实际上是堆叠多个图像。

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

如果您有png，会生成浅蓝色的图表纸。请注意，堆叠顺序可能与您的心智模型相反，第一个项目位于最上方。

由Mozilla出色的文档，在这里：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

工具用于构建梯度：

http://www.colorzilla.com/gradient-editor/

注 - 不IE11工作！我会在发现原因时发布更新，因为它应该这样做。

来源

2014-01-27 12:04:40

壁虎有一个奇怪的错误，其中用于html选择会掩盖即使body元素实际上有更大的z-index你应该能够看到body元素的background-image设置background-color身体的background-image以及纯粹基于简单逻辑的htmlbackground-color。

壁虎错误

避免下列情况...

html {background-color: #fff;} 
body {background-image: url(example.png);}

解决

body {background-color: #fff; background-image: url(example.png);}

来源

2014-07-30 14:50:00 John

-3

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

来源

2014-08-09 12:59:19

下面是使用background-image和的例子在一起：

.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; 
 
}

<div class="box" style="background-color:orange"></div> 
 
<div class="box" style="background-color:green"></div> 
 
<div class="box" style="background-color:blue"></div>

来源

2017-08-17 17:37:56 mpen

大家好我尝试另一种方式来结合背景图片和背景颜色在一起：

HTML

<article><canvas id="color"></canvas></article>

CSS

article{height: 490px;background:url("Your IMAGE") no-repear center cover;opacity:1} 
canvas{widht: 100%; height: 490px; opacity: 0.9;}

JAVASCRIPT

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();}

请让我知道，如果它的工作对你感谢

来源

2017-12-20 19:08:57 adragom

为什么我不能一起使用背景图像和颜色？

回答

相关问题