Question

新建css样式背景图片怎么分开插入图片

Answer 1

css样式背景图片分开插入：

css中的背景(background)：

CSS2 中有5个主要的背景(background)属性，它们是：

* background-color: 指定填充背景的颜色。

* background-image: 引用图片作为背景。

* background-position: 指定元素背景图片的位置。

* background-repeat: 决定是否重复背景图片。

* background-attachment: 决定背景图是否随页面滚动。

这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。

background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。

关键词是不用解释的。x 轴上：

* left

* center

* right

y 轴上:

* top

* center

* bottom

顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：

   

Answer 2

<div class="hot_list showImage">
							<h4>信息广场营业厅</h4>
							<dl class="hot_list_tc">
								<dt
									style="background: url(../images/20141104162907.png) no-repeat 0 0;"></dt>
								<dd>
									<p>地址： 	金水路229
									<br/>当前普通排号人数：0
									<br/>当前VIP排号人数：0 </p>
								</dd>
							</dl>
							<a id="createPositionBtn" class="am-btn am-btn-secondary"
								href="#"
								style="width: 60px; float: right; height: 31px; font-size: 12px; padding-top: 0.5em; padding-bottom: 0.5em; margin-top: -20px; text-decoration: none; margin-right: 70px;">
								<i class="am-icon-gear"></i> 办理
							</a>
						</div>
						<div class="hot_list showImage">
							<h4>五星专营店</h4>
							<dl class="hot_list_tc">
								<dt
									style="background: url(../images/20141104162907.png) no-repeat 0 -99px;"></dt>
								<dd>
									<p>地址： 	郑州市金水区 
									<br/>当前普通排号人数：20
									<br/>当前VIP排号人数：12 </p>
								</dd>
							</dl>
							<a id="createPositionBtn" class="am-btn am-btn-secondary"
								href="#"
								style="width: 60px; float: right; height: 31px; font-size: 12px; padding-top: 0.5em; padding-bottom: 0.5em; margin-top: -20px; text-decoration: none; margin-right: 70px;">
								<i class="am-icon-gear"></i> 办理
							</a>
						</div>
						<div class="hot_list border_no showImage">
							<h4>中路营业厅</h4>
							<dl class="hot_list_tc">
								<dt
									style="background: url(../images/20141104162907.png) no-repeat 0 -198px;"></dt>
								<dd>
									<p>地址： 	郑州市金水路288号
									<br/>当前普通排号人数：10
									<br/>当前VIP排号人数：0 </p>
								</dd>
							</dl>
							<a id="createPositionBtn" class="am-btn am-btn-secondary"
								href="#"
								style="width: 60px; float: right; height: 31px; font-size: 12px; padding-top: 0.5em; padding-bottom: 0.5em; margin-top: -20px; text-decoration: none; margin-right: 70px;">
								<i class="am-icon-gear"></i> 办理
							</a>
						</div>

通过no-repeat 0 0;来设置位置 x y都是负值，x越小，位置越靠右，y越小，位置越靠下。

我引用的图片如下：

Answer 3

多建个层就是了，用漂浮层，叠加起来就可以了