怎样用CSS +DIV将第二张特定图片覆盖第一张图片的部分区域
<div class="img2"></div>
用img2去覆盖img1的部分区域，谢！
写反了，是将第一张特定图片覆盖第二张图片的部分区域 展开
博思aippt
2024-07-20 广告
假设图都是100*100的，实现方式如下：
<style>
* {margin:0;padding:0}
div {position:relative;width:500px; heigth:500px; background:#ccc;}
img {display:block;}
//第一种
#img2 {position:absolute; top:0px; left:0px;}//绝对定位，脱离文档流，这样就可以让第二张图片覆盖到第一张上了。
//第二种
#img1 {position:absolute; top:0px; left:0px;z-index:1;}
#img2 {position:absolute; top:0px; left:0px;z-index:11;} //第二种方式，是样第二张的层级高出第一张，这样也可以实现题目要求。
</style>
<body>
<div>
<img src='1.jpg' id='img1' />
<img src='2.jpg' id='img2' />
</div>
</body>
扩展资料：
div+css布局——
布局分为静态布局和响应式布局。我们div和css布局是静态布局。在静态布局下，用百分号和像素设置div等区块的width和heigth属性效果是不一样的。
百分号：当用百分号设置各个div（区块）的时候，是相对父元素的，当父元素相对父元素，父元素与又相对父元素最终到。
html元素的时候是相对的屏幕的height和width的，所以当你把所有的div（区块）的height和width的都用百分号的时候，就可以实现响应式布局的效果，随着不同的屏幕分辨率来改变区块的实际像素。
relative：relative是相对定位，区块的初始位置和偏移不是参照父元素，而是参照最近的一个父元素里面的他的上一个元素
这样也可以设置top，left等属性的值（用百分号）来实现位置的偏移，而且可以达到响应式布局的效果。
像素px：用像素px来实现布局，直接设置父元素的height和width像素数，这样网页就是定长和定宽的了，遇到小屏幕会出现滚动条。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>将第一张特定图片覆盖第二张图片的部分区域</title>
<style type="text/css">
.box{
position:relative;
left:0;
top:0;
}
.img1{
z-index:99;
position:absolute;
left:0;
top:0;
}
.img2{
z-index:1;
position:absolute;
left:80px;
top:50px;
}
</style>
</head>
<body>
<div class="box">
<div class="img1"><img src="ec004b136369df4ccb80c4c6.jpg" width="425" height="425" alt="1" /></div>
<div class="img2"><img src="b1ec51d1c3652e06960a16c5.jpg" width="425" height="425" alt="2" /></div>
</div>
</body>
</html>
只需要将第二张图片定位到第一张图片上就可以了。下面是简单的实现：(图都是100*100的)
<style>
* {margin:0;padding:0}
div {position:relative;width:500px; heigth:500px; background:#ccc;}
img {display:block;}
//第一种
#img2 {position:absolute; top:0px; left:0px;}//绝对定位，脱离文档流，这样就可以让第二张图片覆盖到第一张上了。
//第二种
#img1 {position:absolute; top:0px; left:0px;z-index:1;}
#img2 {position:absolute; top:0px; left:0px;z-index:11;} //第二种方式，是样第二张的层级高出第一张，这样也可以实现题目要求。
</style>
<body>
<div>
<img src='1.jpg' id='img1' />
<img src='2.jpg' id='img2' />
</div>
</body>
position:absolute
然后控制样式的top(上边距)和left(左边距)就OK了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>New Page | xHTML1.0 Transitional</title>
<style>
div{ position:absolute;border:1px solid red;}
.div1{top:50px;left:200px }
.div2{top:100px;left:250px }
</style>
</head>
<body>
<div class = 'div1'><img src = 'A1.jpg'></div>
<div class = 'div2'><img src = 'A2.jpg'></div>
</body>
</html>
