如何设计CSS样式用CSS+DIV控制一张图片在背景图片上的?

时间：2022-11-17 18:59:24
比如A是一背景图片，B是一样小图片，我需要把B放在A上面（叠加在上面的），怎么写这个样式？希望给出几个属性？

12 个解决方案

#1

你可以用俩个div，其中一个div包含另外一个，A为父div的背景，B为子div的背景

#2

如果你的A是Div或者table之类的容器  可以直接设置背景图片为A

#3

<style type="text/css">
#A{postion:relative; width:300px; height:300px;background-color:#A2A2A2;}
#B{postion:absolute; width:100px; top:20px; left:20px; height:100px;background-color:#DBDBDB;}/*B在A内部浮动*/
<style>
<div id="A">

<div id="B">

</div>

</div>

#4

记得结贴····

#5

将A设为背景，B直接将为图片使用

#6

引用 3 楼 zooen2011 的回复:
<style type="text/css">
#A{postion:relative; width:300px; height:300px;background-color:#A2A2A2;}
#B{postion:absolute; width:100px; top:20px; left:20px; height:100px;background-color:#DBDBDB;}/*B在A内……

+1
把postion改成position

#7

DIV用padding控制或小图用margin控件

#8

引用 6 楼 xiaozhang1528008 的回复:
引用 3 楼 zooen2011 的回复:
<style type="text/css">
#A{postion:relative; width:300px; height:300px;background-color:#A2A2A2;}
#B{postion:absolute; width:100px; top:20px; left:20px; height:100px;backgroun……

+++

#9

<style type="text/css">
 #divNum1{ background-image:url(../images/张根锡-黄泰京.jpg); width:200px;height:200px; background-position:center;}
 #divNum2{background-image:url(../images/btn01.png); width:200px; height:200px; background-position:center; background-repeat:no-repeat;}
</style>
<div id="divNum1">
 <div id="divNum2"></div>
</div>

#10



<!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">

<!--

body,td,th {

	font-size: 12px;

	margin:0px;

	padding:0px;

}

.a { width:500px; height:500px; background:url(1.jpg) }

.b { position:absolute; top:10px; left:10px; width:200px; height:200px; background:url(2.jpg) }

-->

</style></head>


<body>

<div class="a"></div>

<div class="b"></div>

</body>

</html>


调节b样式的 top 和 left 可以设置 小图的位置

#11

或者
父子关系 



<!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">

<!--

body,td,th {

	font-size: 12px;

	margin:0px;

	padding:0px;

}

.a { width:500px; height:500px; background:url(1.jpg) }

.b { width:200px; height:200px; background:url(2.jpg)}

-->

</style></head>


<body>

<div class="a"><div class="b"></div></div>

</body>

</html>

#12



<div style="background:url(图片a) no-repeat 0 0">

<img src="图片b"/>

</div>

#1

你可以用俩个div，其中一个div包含另外一个，A为父div的背景，B为子div的背景

#2

如果你的A是Div或者table之类的容器  可以直接设置背景图片为A

#3

<style type="text/css">
#A{postion:relative; width:300px; height:300px;background-color:#A2A2A2;}
#B{postion:absolute; width:100px; top:20px; left:20px; height:100px;background-color:#DBDBDB;}/*B在A内部浮动*/
<style>
<div id="A">

<div id="B">

</div>

</div>

#4

记得结贴····

#5

将A设为背景，B直接将为图片使用

#6

引用 3 楼 zooen2011 的回复:
<style type="text/css">
#A{postion:relative; width:300px; height:300px;background-color:#A2A2A2;}
#B{postion:absolute; width:100px; top:20px; left:20px; height:100px;background-color:#DBDBDB;}/*B在A内……

+1
把postion改成position

#7

DIV用padding控制或小图用margin控件

#8

引用 6 楼 xiaozhang1528008 的回复:
引用 3 楼 zooen2011 的回复:
<style type="text/css">
#A{postion:relative; width:300px; height:300px;background-color:#A2A2A2;}
#B{postion:absolute; width:100px; top:20px; left:20px; height:100px;backgroun……

+++

#9

<style type="text/css">
 #divNum1{ background-image:url(../images/张根锡-黄泰京.jpg); width:200px;height:200px; background-position:center;}
 #divNum2{background-image:url(../images/btn01.png); width:200px; height:200px; background-position:center; background-repeat:no-repeat;}
</style>
<div id="divNum1">
 <div id="divNum2"></div>
</div>

#10



<!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">

<!--

body,td,th {

	font-size: 12px;

	margin:0px;

	padding:0px;

}

.a { width:500px; height:500px; background:url(1.jpg) }

.b { position:absolute; top:10px; left:10px; width:200px; height:200px; background:url(2.jpg) }

-->

</style></head>


<body>

<div class="a"></div>

<div class="b"></div>

</body>

</html>


调节b样式的 top 和 left 可以设置 小图的位置

#11

或者
父子关系 



<!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">

<!--

body,td,th {

	font-size: 12px;

	margin:0px;

	padding:0px;

}

.a { width:500px; height:500px; background:url(1.jpg) }

.b { width:200px; height:200px; background:url(2.jpg)}

-->

</style></head>


<body>

<div class="a"><div class="b"></div></div>

</body>

</html>

#12



<div style="background:url(图片a) no-repeat 0 0">

<img src="图片b"/>

</div>
标签：

相关文章