如何让img设置成为div中的背景图片

最新推荐文章于 2024-11-18 08:48:03 发布

原创最新推荐文章于 2024-11-18 08:48:03 发布 · 1.6w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #asp.net #图片

jsp 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了一个将img元素设置为div背景图片的技巧，通过CSS样式实现图片定位并隐藏img元素，使图片作为div的背景，同时保持表格内容的显示。涉及到的关键CSS属性包括position: absolute, z-index: -1以及使用expression进行宽度限制。" 17310017,1426371,双数组AC自动机实现解析与应用,"['算法', '字符串处理', '模式匹配', '数据结构', '自动机']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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" />
 <link rel="stylesheet" href="default.css" type="text/css" />
<script src=".jquery.js" type="text/javascript"></script>
 <script type="text/javascript">

 </script>
</head>
<body>
 <div class="div0">
	<div class="div1">
		<img src="hello.jpg"/>
		<div class="div2">
			<table class="table1">
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
				<tr>
					<td>11111111111111111111111111</td><td>22222222222222222222222</td>
				</tr>
			</table>	
		</div>
	</div>
</div>
</body>
</html>

.div0{
	margin:0 auto;
	height:360px;
	width:360px;
	overflow:hidden;
	border:2px solid Black;
}

.div1{
	position:relative;
	margin:0 auto;
	width:350px;
	height:300px;
	border:1px solid Blue;
}

.div2{
	padding-left:10px;
	overflow:auto;
	height:280px;
	border:1px solid Black;
}


.table1 tr td{
	border:1px solid Black;
}
img{
position:absolute;
  left:0px;
  top:10px;
  z-index:-1;
width:100%!important; 
height:96%!important; 
width:expression(this.width > 150 ? "150px" : this.width)!important;}
}

注：在设置absolute时，父类必须是：relative