零基础入门前端开发工程师，实战演练CSS中背景属性

前段时间，公司来了一位前端开发，在实践项目中，遇到了一些问题：明明加载了背景图，但是背景图却不出来。

前端做出来的效果图

原图效果

大家看到，本来应该有可口可乐背景图，但是没有。我们来看看代码：

HTML代码

CSS代码

在这里，只需要将background-image属性换成background即可：

CSS样式

这样便可出现原图效果。

既然已经说到这里，那我们就来好好谈谈background属性：

background属性

设置元素的背景颜色：

设置元素的背景颜色

设置背景图片：

设置背景图片

会用到的一张图：

1.jpg

设置背景图像的开始位置：

设置背景图像的开始位置

设置是否及如何重复背景图像：

设置是否及如何重复背景图像

设置是否及如何重复背景图像

当然，这些属性是可以简写的

效果图

CSS代码

如果你选择简写，那么就只能用background属性，不能用background-image/background-position/...等等属性。