[分享]css同时加背景图和背景颜色

在网页设计中，背景图和背景颜色是两种常见的背景样式。但你是否曾经遇到过需要同时使用这两种样式的情况呢？这时候就需要用到CSS。CSS中的background属性同时支持背景图和背景颜色。我们可以使用b...

在网页设计中，背景图和背景颜色是两种常见的背景样式。但你是否曾经遇到过需要同时使用这两种样式的情况呢？这时候就需要用到CSS。

CSS中的background属性同时支持背景图和背景颜色。我们可以使用background-image来定义背景图，使用background-color来定义背景颜色。同时，我们还可以使用background-repeat来控制背景图的平铺方式。

body { background-image: url("bg-image.jpg"); background-color: #F0F0F0; background-repeat: no-repeat;}

在上面的代码中，我们给body元素定义了一个背景图和一个背景颜色。背景图是通过url()函数来引用的，这里用了相对路径。背景颜色是使用十六进制颜色码来定义的。background-repeat属性被设置为no-repeat，表示不重复平铺背景图。

除了以上的属性，我们还可以使用background-size来控制背景图的尺寸。background-position属性可以让我们指定背景图的位置，比如“top left”表示背景图在左上角。

body { background-image: url("bg-image.jpg"); background-color: #F0F0F0; background-repeat: no-repeat; background-size: cover; background-position: top left;}

在上面的代码中，我们添加了background-size和background-position属性。background-size被设置为cover，表示使背景图完全覆盖整个容器。background-position被设置为top left，则表示背景图在左上角。

通过以上的示例，我们可以同时使用背景图和背景颜色来美化页面背景。不过需要注意的是，背景图和背景颜色应该合理搭配，以达到最佳视觉效果。