Question

我要做的是同时展示background-color和background-image，以便div的一半覆盖正确的阴影背景图像，另一部分将覆盖背景颜色。

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

Answer 1

完全可以同时使用颜色和图像作为元素的背景。

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

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

Answer 2

使用

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

Answer 3

要为图像着色，您可以使用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中不起作用！当我发现原因时，我会发布更新，因为它应该是。

Answer 4

要添加到this答案，请确保图片本身具有透明背景。

Answer 5

以下是一起使用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>

Answer 6

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

要实现这一点，您需要像这样设置from PyPDF2 import PdfFileMerger, PdfFileReader, PdfFileWriter import os import glob class MergeAllPDF: def __init__(self): self.mergelist = [] def create(self, filepath, outpath, outfilename): self.outfilname = outfilename self.filepath = filepath self.outpath = outpath self.pdfs = glob.glob(self.filepath) self.myrange = len(self.pdfs) for _ in range(self.myrange): if self.pdfs: self.mergelist.append(self.pdfs.pop(0)) self.merge() def merge(self): if self.mergelist: self.merger = PdfFileMerger() for pdf in self.mergelist: self.merger.append(open(pdf, 'rb')) self.merger.write(self.outpath + "%s.pdf" % (self.outfilname)) self.merger.close() self.mergelist = [] else: print("mergelist is empty please check your input path") # example how to use #update your path here: inpath = r"C:\Users\Fabian\Desktop\mergeallpdfs\scan\*.pdf" #here are your single page pdfs stored outpath = r"C:\Users\Fabian\Desktop\mergeallpdfs\output\\" #here your merged pdf will be stored b = MergeAllPDF() b.create(inpath, outpath, "mergedpdf")属性：

background

注意.bg-image-with-color { background: url("example.png") no-repeat, #ff0000; }之后的逗号和颜色代码；这将设置您想要的背景颜色。

我在this YouTube video中发现了此内容，但是我与该频道或视频无关。

Answer 7

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

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

Answer 8

Gecko有一个奇怪的错误，设置background-color选择器的html将覆盖body元素的background-image，即使body元素 in效果具有更大的z-index，应能够看到正文background-image以及基于html background-color的{{1}}纯粹基于简单的逻辑。

Gecko Bug

避免以下情况......

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

解决方法

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

Answer 9

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

HTML

<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

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

如果它适合您，请告诉我感谢

Answer 10

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

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

10 个答案: