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

我要做的是显示 background-color和 background-image，这样我的 div的一半将覆盖右边的阴影背景图像，其他左边的部分将覆盖背景颜色。

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

298093 次浏览
小开

使用

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

并添加到 这个答案，确保图像本身有一个透明的背景。

小开

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

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

小开
最佳答案

使用颜色和图像作为元素的背景是完全可能的。

您可以设置 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;

没有办法明确地限制背景图像只覆盖元素的一部分，所以你必须确保图像比元素小，或者它有任何透明区域，背景颜色才能被看到。

小开

为了给图像着色，可以使用 CSS3background来堆叠图像和 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中不起作用! 当我找到原因时，我会发布一个更新，因为它应该。

小开

Gecko 有一个奇怪的错误，为 html选择器设置 background-color将掩盖主体元素的 background-image，即使 body元素 实际上有一个更大的 z 索引，你可以看到主体的 background-image和 html background-color，纯粹基于简单的逻辑。

壁虎甲虫

避免以下情况。

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

解决问题

body {background-color: #fff; background-image: url(example.png);}
小开 
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;
小开

下面是一个同时使用 background-image和 background-color的例子:

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

小开

大家好，我尝试了另一种将背景-图像和背景-颜色结合在一起的方法:

超文本标示语言

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

CSS

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


canvas{
width: 100%;
height: 490px;
opacity: 0.9;
}

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

如果对你有用，请告诉我 谢谢

小开

实际上有一种方法可以使用背景颜色与背景图像。在这种情况下，背景部分将用指定的颜色填充，而不是白色/透明的颜色。

为了实现这一点，您需要像下面这样设置 background属性:

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

请注意 no-repeat后面的逗号和颜色代码; 这将设置您希望的背景颜色。

我在 这个 YouTube 视频中发现了这一点，但是我并不属于那个频道或视频在任何方式。


提交答案