CSS如何让背景图片自适应div
的有关信息介绍如下:在网页的设计过程中,需要经常用到将背景图片自适应所在div的区域内,那么如何利用CSS让背景图片自适应div呢?下面就随我一起进行实际操作吧。
第一步:为了便于演示,我先新建一个“演示文件夹”,并准备好背景图片放入其中。
第二步:打开网页制作软件:Adobe Dreamwweaver,并新建一个“HTML”文件后,点击“文件”——>“另存为”,保存到刚才新建的“演示文件夹中”。
第四步:在
标签里面写一个div标签,并设置id。第五步:在
标签里编写css样式:#bg{ width:800px;
height:600px;
border:5px solid #C03;
background:url(bg.png) ;
}
第六步:样式写完后保存网页文件,并在IE11.0浏览中浏览,发现,背景图片自动重复填充,不符合我们的要求。此时,我们需要继续编写样式。
第七步:如果要求将背景图片完整的全部显示在div规定的区域内,则只需将背景图片的额尺寸修改为和div区域的尺寸大小一致即可。样式代码如下:
#bg{
width:800px; height:600px; border:5px solid #C03;
background:url(bg.png) no-repeat;
background-size:800px 600px;
}
这样编写代码后,在浏览器中可以看到,背景图片完全适应了div区域大小。
第八步:如果对只是作为背景图片来用,也可以这样编写样式:
#bg{
width:800px; height:600px;border:5px solid #C03;
background:url(bg.png) no-repeat;
background-size: cover;
}
这样的样式写法,背景图像的某些部分可能无法显示在背景定位区域中,但是依然可以铺满规定的div区域。
总结:
1、背景图片自动适应div区域,需要在CSS中编写样式来控制。
2、如果严格要求背景图片全部铺满div区域内,并显示在div区域内,则在样式中需写将背景图片尺寸和div区域大小设置一样。
3、 如果只是作为背景铺满div区域,则可以这样写:background-size: cover;