虎课网为您提供字体设计版块下的店铺装修-CSS中的背景样式图文教程，本篇教程使用软件为DW（CC2016），难度等级为初级练习，下面开始学习这节课的内容吧！

本篇教程学习的是店铺装修-CSS中的背景样式，喜欢的一起来学习吧。

那我们开始今天的教程吧。

1.在【窗口】-【CSS设计器】添加【在页面中定义】，添加一个新的类，【布局】里面有两个重要的东西，一个是【宽】，一个是【高】，没有宽和高的话，背景就不显示了。

2.把【背景】里面的东西截图，对比着去做，创建一个【div】，写一下背景样式，添加样式，写下【background-color】，给它一个颜色，文字就有背景色了，给这个元素设置宽高，在里面写上字，修改个颜色，这个样式就有了。

3.加上【text-align】就是文本的水平对齐方式，写个【center】，刷新一下，文字就水平居中了，除了颜色以外，还可以添加背景的图像。

4.找张图，把链接复制过来，把背景颜色删掉，写个【background-image】，然后【浏览】一下，这个是引入背景图像的方式，现在把它去掉，换成网络图像，这个时候图像就已经有了。

5.现在图像是重复的，写个【background-repeat】，这个就是背景重复，写个【no-repeat】，这个时候就只有一张图了。

6.图像和颜色共存的时候，图像的优先级要高，颜色会被图像给覆盖着，加上【no-repeat】，才能看到背景的颜色，可以设置成【repeat-x】，这时水平轴进行平铺了，【repeat-y】是垂直方向的平铺，这个就是【background-repeat】的属性了。

7.【background-position】就是背景的偏移，它是由两个值组成的，水平方向偏移【100px】，【空格】，第二个值偏移【50px】，图像就正好在偏移好的地方，偏移也可以有负值。

8.还可以通过左中右的方式做，左边left，中间center，右边right，上是top，下是bottom，通过【background-position】可以让图像改变。

9.url就是路径，下面都是对背景图像操作的，【background-position】是偏移，也可以通过百分比进行偏移，也是一样的。

10.【background-size】就是背景图像的大小，这个属于CS3增加的内容，淘宝店铺里面是不支持的。

11.写个【background-size】，宽度写个100%，高度100%，这两个一个代表x轴，一个代表y轴，图片就拉伸了，但是把代码放到店铺去看，就会把【background-size】都删掉了。

12.【background-clip】也是CS3新增加的，这个就是背景图像的裁剪大小，其实我们不用这个，用【background-position】就可以了。

13.【background-origin】就是偏移的起始点，这个也用不到，【background-attachment】这个下节课再讲，然后我们可以对背景进行简化。

14.前面都有【background】，我们只写值就可以了，如果要给颜色的话，在后面直接加颜色，如果写路径的话，【空格】，把这个值拿过来，这样可以不用记属性了，直接记前面的值就可以了，值用空格是隔开的，中间可以加多个空格或一个空格。

15.值写上【right bottom】，是没有问题的，这个没有先后顺序，先写谁后写谁都可以，唯一一个不能改变位置的是背景偏移。

以上就是店铺装修-CSS中的背景样式图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！