CSS背景图像和背景颜色同时使用的方法

一、问题

我们经常遇到，在设置网页过程中，需要同时设置网页背景图片和网页背景颜色的情况。比如：背景图太小或者网页内容太长，背景图片不能覆盖的部分页面太丑了，我们就想使用背景颜色来代替。

可以background-color的时候背景图片却消失了。

二、解决方法

要解决上述问题，使用以下方法：

1、使用background-position样式

设置background-color和background-image样式的时候，如果图像小于元素，则需要使用background-position样式将其放在右侧，并使其不会重复。

或者

没有办法专门限制背景图像只覆盖部分元素。因此您必须确保图像比元素小，或者它有任何透明区域，以使背景颜色可见。

2、图形着色

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