盒模型的问题. 有三层盒子,每层都有背景图片都是透明PNG来堆叠组图案.只是中间一层想只显示某个区域,区域比最内层的盒子还小,能否实现

再看我一眼 2014-01-03 10:56:43

如下图

我希望2盖住1 3盖住2

但是2的显示范围比较小,而DIV体积必须大于等于3

目前html代码这样写的



<div class="index_b1">

	<div class="index_b3">

		<div class="index_b2">

		    <!--现在是盒子3套了盒子2,所以显示肯定是错误的-->

		</div>

	</div>

</div>

css



.index_b1{

	width:1440px;

	height:768px;

	text-align:center;

	margin:auto;

	background:url("1.PNG") no-repeat;

}

.index_b3{

	width:1440px;

	height:768px;

	text-align:center;

	background:url("3.PNG") no-repeat;/*现在是盒子3套了盒子2,所以显示肯定是错误的*/

}

.index_b2{

	width:884px;

	height:347px;

	text-align:center;

	background:url("2.png") no-repeat;

	position:relative;

	top:200px;

	left:278px;

}

效果当然变成了

求教如何破解,最好是能2套3 但是2只显示中间的区域



<div class="index_b1">

	<div class="index_b2">

		<div class="index_b3">

		    

		</div>

	</div>

</div>

=====================================
接下来是问题2
我在盒子2的不同位置描绘区域, 用js代码来实现不同的按钮效果,但是它被盒子3遮盖了还能否实现?

比如这些红色的按钮

...全文

281 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

再看我一眼 2014-01-03

打赏
举报

引用 2 楼 u011461314 的回复:

你不用理3个小图片，根据你3个小图片所在的区域，取事件不是很好吗？

这些区域是想基于某个div来定位目前设想的是放在最小的DIV里来判断不过你这样说的话以大的来定位也可以,但是比较担心会因为分辨率低的浏览器引起错位

引用 4 楼 showbo 的回复:

直接ps组合成你要的图片，其他的热点搞定就行了吧。。你那样弄不是自找麻烦。。热点自己看你另外个帖子

其实用PS做好小图盖大图的图片是最方便的,但是实在不好意思麻烦美工妹子...

引用 3 楼 zyl_lyr1019 的回复:

<style>
.index_b1{
    width:1440px;
    height:768px;
    text-align:center;
    margin:auto;
    background:red;
	position:relative;
}
.index_b3{
    width:1440px;
    height:768px;
    text-align:center;
    background:blue;/*现在是盒子3套了盒子2,所以显示肯定是错误的*/
	position:relative;
}
.index_b2{
    width:884px;
    height:347px;
    text-align:center;
    background:yellow;
    position:absolute;
    top:200px;
    left:278px;
}</style>
</head>
<body>
<div class="index_b1">
	<div class="index_b2">
    </div>
    <div class="index_b3">
    </div>
</div>

非得使用嵌套的HTML格式吗？这样把2和3使用兄弟元素，使用定位可以实现你的要求的，我这里把背景改成了颜色。而你说的那个按钮效果，可以使用定位热点实现吧。也是基于定位的。

感谢,一语惊醒梦中人,相对定位+Z轴分层这个之前怎么就没想到呢... 能否实现按需要的叠加待我试试再说

Go 旅城通票 2014-01-03

打赏
举报

直接ps组合成你要的图片，其他的热点搞定就行了吧。。你那样弄不是自找麻烦。。热点自己看你另外个帖子

张运领 2014-01-03

打赏
举报

<style>
.index_b1{
    width:1440px;
    height:768px;
    text-align:center;
    margin:auto;
    background:red;
	position:relative;
}
.index_b3{
    width:1440px;
    height:768px;
    text-align:center;
    background:blue;/*现在是盒子3套了盒子2,所以显示肯定是错误的*/
	position:relative;
}
.index_b2{
    width:884px;
    height:347px;
    text-align:center;
    background:yellow;
    position:absolute;
    top:200px;
    left:278px;
}</style>
</head>
<body>
<div class="index_b1">
	<div class="index_b2">
    </div>
    <div class="index_b3">
    </div>
</div>