DIV+CSS样式表里怎么把图片定义在另一个图片上？
DIV+CSS样式表里怎么把图片定义在另一个图片上？
我的意思就是想要说，把这个图片分两快来排版，然后后期还要写个鼠标经过的样式，如下图点击那个在线咨询那下面就会有一块灰色的背景，然后鼠标离开的时候，灰色区域也会隐藏！
用DIV的定位属性position和a标签
麻烦下，能不能具体些？嘿嘿！
DIV的定位属性position：相对定位和绝对定位，你百度一下
的感言： 灰常感谢啊。
其他回答 (1)
你说的是像别的网站的导航，鼠标放上去背景就变了？
不是的，就是鼠标放下去，第一个图片下面就有第二个图片那灰色背景区域。离开又会没有！
相关知识等待您来回答
网页制作领域专家
& &SOGOU - 京ICP证050897号利用CSS定位背景图片 background-position
作者：佚名
字体：[ ] 来源：互联网 时间：12-17 14:15:55
我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片;
这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。
那么怎么来实现一张图片在不同的地方只显示其中的一部分呢，这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过，也经常有朋友问我，所以今天就系统的说一下：
我们知道在用图片作为背景的时候，css要这样写，以div容器举例子，也可以是body、td、p等的背景，道理一样。
div{ background:#FFF url(image) no-}
这里的background的属性值依次为：
#FFF 背景色：（颜色值，背景图片没有覆盖的地方，或者没有背景图片时表现的背景色）image 背景图片：（这里是图片的地址）no-repeat 是否重复：（图片小于容器的大小时，默认会重复排列图片以填满容器，no-repeat表示不重复，只有这个时候后面的定位坐标才有用。）fixed 背景是否随容器滚动：（有两个可选值，scroll滚动，fixed不滚动，默认是scroll）x y 背景图像的定位：（注意，只有在no-repeat下定位才有意义。这个就是今天要讲的重点）
背景图像定位中我们要明确的几点：
1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。2、坐标轴的原点就是对应容器的左顶点。3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。4、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。5、x y的值可以用百分比或者px来表示。6、x y也可以用&left、right、top、bottom、center&这五个对齐方式来表示，但注意：用&left、right、top、bottom、center&来表示的时候，应用的是对齐规则，而不是坐标规则。x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，y为top的时候表示图片的顶部和容器的顶部对齐，为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐。7、x y用百分比或者px表示的时候，其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义，x为负数时候表示图片左顶点在容器左顶点的左侧，y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。
下面我用几个图示来说明一下几种情况，蓝色块表示图片，虚线框表示容器（可以div，td，或者直接就是body），注意只有背景图片在容器内我们才能看见，我用白色表示可见部分，而且超出容器范围的是看不见的，我用灰色表示。容器的左定点的坐标就是（0，0）。
第一张，背景图片和容的左上对齐，0px 0px 也可以写成left top
第二张，背景图在容器中间，定点坐标为正值
第三张，背景图部分在容器左上，定点坐标为负值
--------------------------------------------------------------------------- 到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片，返回去我们看一下开始的时候介绍的两个图片，我们就是可以用：背景定位和容器内才可见这两个性质来随意的调用整张图片的某一部分。
但是我们为了调用方便，在排列这些小图片的时候要讲究一点规则，比如：小图之间的距离通常是调用小图的容器的大小，或者距离更大一点，这样就可以避免在容器内显示出我们不愿意显示的图片！
补充一点，如果定位用的是百分比话，算法比较特殊。我举个例子：
background:#FFF url(image) no-repeat fixed 50% -30%;
这个时候图片应该在容器的什么位置呢,算法公式如下：
图片左顶点距容器左顶点的坐标位置为 x：（容器的宽度-图片的宽度）x50% y：（容器的高度-图片的高度）x（-30%） 得到的结果应用坐标法则，差值如果为负数，百分比为正那么运算结果是负值。如果差值为负数，百分比也为负数，那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。 比如：容器是width：600px；height：600px；而图片是width：200px；height：200px； 我们用上面的样式，可以得到图片位置为： x：(600px-200px)*50% y：(600px-200px)*(-30%) 如下图：
大家感兴趣的内容
12345678910
最近更新的内容网页设计教程子分类所有回答(3)
css有background-position属性和background-repeat属性，请具体参见标准说明手册，并搜索css sprite查看相关技术
园豆：17610
background-position& 主要是这个属性&&& 很少能用到background-repeat了&& 基本都是定义固定高度宽度了
简单地说就是利用background-position进行背景图片定位。需要注意的就是这个盒子的大小，不能太大或太小，不能让图片其它位置显示出来。关于如何精确定位，网上有很多软件我一直用bg2css，这个挺不错的百度一下就可以搜到。& 关于相关案例可以参考/的导航栏的做法，淘宝用的是&s&&/s&空标签
#mall-nav .map s {background-position:-98px -78px;}#mall-nav li s {float:left;height:18px;margin:10px 4px 10px 0;width:21px;} (第 12 行)#mall-nav s, #footer, #mall-desc i, #mall-desc dt span, #mall-search fieldset, #mall-search label, #mall-search input, #mall-search .input button, #mall-search .goods {background:url("/tps/i4/T1H24MXkxLXXXXXXXX.png") no-repeat scroll 0 0 transparent;}
&&&您需要以后才能回答，未注册用户请先。怎么通过css 样式 盖住div层中的图片;我是想用另外一张图片 覆盖 住原来的图片_百度拇指医生
&&&网友互助
?怎么通过css 样式 盖住div层中的图片;我是想用另外一张图片 覆盖 住原来的图片
病情描述(发病时间、主要症状等)：function isCheak(){ isc.DataSource.get(&car_position&).fetchData(null,
function (dsResponse, data) {
for(var i=0; i&data.getLength(); i++ ){
var d = data[i];
var $td = $(&#&+d.car_position);
if(d.car_position_isused === true){
$(&#div_che&).css({&src&,&url('images/tc_p.jpg')&});
);} .............&td class=&x& id=&54-2&&&div id=&div_che&&&img src=&images/che.jpg& alt=&54-2& width=&22& height=&15& /&&/div&&/td&.............function isCheak(){ isc.DataSource.get(&car_position&).fetchData(null,
function (dsResponse, data) {
for(var i=0; i&data.getLength(); i++ ){
var d = data[i];
var $td = $(&#&+d.car_position);
if(d.car_position_isused === true){
$(&#div_che&).css({&src&,&url('images/tc_p.jpg')&});
);} .............&td class=&x& id=&54-2&&&div id=&div_che&&&img src=&images/che.jpg& alt=&54-2& width=&22& height=&15& /&&/div&&/td&.............
只能够将图片或者包含图片的标签的position属性设为&absoulte&，然后通过设置较大的z-index以及left和top属性去覆盖老图片。测试是最好用firefox浏览器。因为老版本的IE浏览器对z-index属性支持有一些问题。当然这样的bug是可以调试好的。
向医生提问
完善患者资料：*性别：
运用“z-index”等级
用浮动试试，margin-top:负值
只能用定位做
利用CSS的定位，然后利用 z-index设置层级关系，比如
z-index:1; z-index:2
那么后面的这个属性将浮动到第一个属性上面。
为您推荐：
您可能关注的推广回答者：
* 百度拇指医生解答内容由公立医院医生提供，不代表百度立场。
* 由于网上问答无法全面了解具体情况，回答仅供参考，如有必要建议您及时当面咨询医生}