2.3.0 background(CSS)

最新推荐文章于 2024-06-21 15:26:11 发布

池布旁

最新推荐文章于 2024-06-21 15:26:11 发布

阅读量397

点赞数

分类专栏： CSS层叠样式表文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_63692368/article/details/123067285

版权

CSS层叠样式表专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2.3.0 background

可以使用background -image:url(); 可以替代标签
background-attachment:scroll为默认属性图片根据父标签的位置而固定
:fixed 图片会根据父标签的位置而滚

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	#main{
		width: 1000px;
		height: 2000px;
		border: 1px solid black;
		background-color: yellow;
	}

	#one{
		width: 800px;
		height: 800px;
		background-image: url(./image/2.jpg);/* 可以使用background-image:url(地址); 可以替代<img>标签 */
		background-repeat: no-repeat;/*no-repeat图片不重复(默认属性为重复)   repeat：重复    repeat-x:x方向重复 repeat-y:y方向上重复 */
		background-position: 100px 100px;
		background-attachment: fixed;/* background-attachment:scroll为默认属性  图片根据父标签的位置而固定
		                                                     :fixed 图片会根据父标签的位置而滚   */
	}


	</style>
</head>
<body>
<div id="main">
	<div id="one">
		
	</div>
</div>
</body>
</html>

精灵效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	body{
		margin: 0;
		padding: 0;
	}

	body{
		margin: 100px;
	}

	a{
		display: block;
		width: 55px;
		height: 54px;
		background-image: url(./image/toolbar_cart.png);
	}

	a:hover{
		background-image: url(./image/toolbar_cart_focus.png);
		
	}


	</style>
</head>
<body>
	
	<a href="#"></a>
</body>
</html>