插入图片与背景图片的区别

插入图片与背景图片的区别

1.修改插入图片

插入一张图片

<style type="text/css">
  section {                    /*单纯设置一个盒子的基础属性*/
   width: 400px;
   height: 400px；
   border: 1px solid red;
}
</style>



<section>
	<img src="im.jpg"  width="800" height="600">
</section>

(1)插入图片修改大小，用width和height

section img {
   width: 300px;
   height: 300px;
}

(2)插入图片修改位置，可以用margin或padding

section img {	
	margin-top: 30px;            /* 插入图片更改位置 可以用margin 或padding  盒模型 */
	margin-left: 50px;        /* 插入的图片也是一个盒子 */
}

2.修改背景图片

设置一张背景图片

<style type="text/css">
div {                             /*设置盒子的基础属性*/
   width: 400px;                    
   height: 400px;
   border: 1px solid red;
   background: #fff url(images/sun.jpg) no-repeat;       /*在盒子里设置背景图片*/
   
}
</style>

<div>
  
</div>

(1)修改背景图片大小：background-size

div {	
	width: 400px;                    
   	height: 400px;
   	border: 1px solid red;
   	background: #fff url(images/sun.jpg) no-repeat;       
  
  	background-size: 200px 210px;   /*  背景图片更改大小只能用background-size，不可用宽高 */
}

(2)修改背景图片位置：background-position

div { 
 	width: 400px;                    
    	height: 400px;
    	border: 1px solid red;
    	background: #fff url(images/sun.jpg) no-repeat;     

 	background-position: 30px 50px; /* 背景图片更该位置 用background-position */
} 

背景图片适合做一些小图标，产品展示之类可以用插入图片，可以做一些动画。插入图片占位置，而背景图片不占，如果在设置背景图片的盒子里写文字，会显示在背景图片上。