【css】展示背景图片的底部部分

利用背景图的background-position  实现

 demo

方法一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				position:relative;
				width:200px;
				height:200px;
				border:1px solid red;
				background:url(../images/heightbig.jpg) no-repeat scroll  0 -232px ;
				background-size:100%;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

 

原图

 

 效果：

方法二（推荐）：

.box{
    position:relative;
    width:200px;
    height:200px;
    border:1px solid red;
    background:url(../images/heightbig.jpg) no-repeat;
    background-size:100%;
    background-position: bottom;
}

 

拓展：

 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

 效果：

 

 

posted on 2022-09-02 10:15  smile轉角  阅读(360)  评论(0)  编辑  收藏  举报

导航