1.背景图片的插入方法
- 行内样式插入背景图:< div style=“background-image: url(./imges/boluo.PNG);”>
- 在css样式表中引入背景图
注意:设置背景图片的元素一定要有具体的宽度和高度,否则会导致背景图片无法显示
2.背景图相关属性的设置
2.1 background-size属性
background-size:设置背景图大小,它的属性值有:cover、contain和具体的宽度和高度值
(1)cover:浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况下,有些图像可能会跳出盒子外,也就是说图像铺满了盒子,但是会有一部分被剪切了
div{
width: 1000px;
height: 680px;
border: palevioletred 3px solid;
margin: auto;
background-image: url(./imges/boluo.PNG);
background-size: cover;
}
代码展示效果:
(2)contain:浏览器将使图像的大小适合盒子内。在这种情况下,如果图像的长宽比与盒子的长宽比不同,则可能在图像的任何一边或顶部和底部出现间隙。
div{
width: 1000px;
height: 680px;
border: palevioletred 3px solid;
margin: auto;
background-image: url(./imges/boluo.PNG);
background-size: contain;
}
通过contain和cover的展示效果可以明显看出来两者的差距
(3)设置具体值:根据自己的需要设置具体的宽和高的值
div{
width: 1000px;
height: 680px;
border: palevioletred 3px solid;
margin: auto;
background-image: url(./imges/boluo.PNG);
background-size:500px 400px;
}
2.2 background-repeat属性
background-repeatÿ