8、有一图片bg.png在images文件夹中，图片的宽度及高度如图所示。Html页面中有一 个id属性为div1 的div（宽度为120px，高度为100px），请按照要求写出代码； 1）div宽度120px，高度100px；添加边框1px，black，虚线；设置div的背景为 色块12. 2） div的宽度为120px，高度100px;；添加边框1px，black，虚线;设置div的背景图片 为色块7、8、11、12各占据1/4

以下是符合要求的代码：

1）设置div的背景为色块12：

<div id="div1" style="width: 120px; height: 100px; border: 1px dashed black; background-color: #CCCCCC;"></div>

2）设置div的背景图片为色块7、8、11、12各占据1/4：

<div id="div1" style="width: 120px; height: 100px; border: 1px dashed black; background-image: url('images/bg.png'); background-repeat: no-repeat;">
  <div style="width: 30px; height: 25px; float: left; background-position: -0px -0px;"></div>
  <div style="width: 30px; height: 25px; float: left; background-position: -30px -0px;"></div>
  <div style="width: 30px; height: 25px; float: left; background-position: -60px -0px;"></div>
  <div style="width: 30px; height: 25px; float: left; background-position: -90px -0px;"></div>
</div>

解释：

- 在第二个代码中，我们设置了div的背景图片为`bg.png`，并且设置了`background-repeat: no-repeat`，以保证图片不会重复。
- 接下来，我们创建了四个子div，每个子div的宽度为30px，高度为25px，浮动在左侧，并且设置了不同的背景位置，以显示不同的颜色区块。其中，第一个子div的背景位置为`-0px -0px`，表示从图片的左上角开始计算，横向偏移0px，纵向偏移0px。后面三个子div的背景位置分别为`-30px -0px`、`-60px -0px`、`-90px -0px`，以此类推。这样设置后，就可以让四个子div分别显示图片中的不同颜色区块了。