css 背景自适应窗口详细分析及案例

参数一:background-size:宽度 高度;设置完后,背景图片会随着我们设置的大小自动缩放
示例:background-size:500px 350px;

参数二:background-size:cover 背景图片会把整个框架(宽和高)都用背景覆盖,同样是缩放效果,所以我们一般用这个属性,这样改完框架大小后,会进行自适应
示例:background-size:cover;

参数三:background-size:contain 只会自适应宽或高其中一项
示例:background-size:contain;

俱体的请看源码,文章下方有源码中的图片下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	
    	body
    	{
    		background: url(img/pic755.jpg);	
    		/*background-size:宽度 高度  */
    		background-size:1440px 900px;
    	}
    	.box,.box2,.box3
    	{
    		float:left;
    		width:500px;
    		height:350px;
    		border:1px solid gray;
    		margin-left:30px;
    		border-radius:10px;
    		box-shadow:1px 1px 0 #333;    		
    		position:relative;
    		
    	}
    	
    	.box
    	{
    		background: url(img/2.jpg);    	
    		/*background-size:宽度 高度;设置完后,背景图片会随着我们设置的大小自动缩放*/
    		background-size:500px 350px;	
    	}
    	
    	.box2
    	{
    		background: url(img/2.jpg);
    		/*background-size:cover 背景图片会把整个框架(宽和高)都用背景覆盖,同样是缩放效果*/
    		/*所以我们一般用这个属性,这样改完框架大小后,会进行自适应*/
    		background-size:cover;    		
    	}
    	
    	.box3
    	{
    		background: url(img/2.jpg) no-repeat;
    		/*background-size:contain 只会自适应宽或高其中一项*/
    		background-size:contain;    		
    	}
    	
    	.txt
    	{
    			width:500px;
    			height:40px;
    			line-height:40px;
    			text-align:center;
    			border-radius:0 0 10px 10px ;
    			background:rgba(255,255,255,0.6);
    			position:absolute;
    			bottom:0;
    	}
    </style>
</head>
<body>
<div class="box">
	<div class="txt">background-size:500px 350px效果</div>
</div>	

<div class="box2">
	<div class="txt">background-size:cover效果</div>
</div>	

<div class="box3">
	<div class="txt">background-size:contain效果</div>
</div>	

	
	
</body> 
</html>
  
2.jpg文件
pic755.jpg文件

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND