作者:羚之舞 | 来源:互联网 | 2022-09-25 15:07
bootstrap可以通过background-image等属性来设置背景图片,background-image属性为元素设置背景图像,代码语法如background-image:url("..images")。
bootstrap怎么设置背景图片自动适应
浏览器:chrome
使用CSS:bootstrap(这个可能会影响到我们css的设置,所以还是提一下)
在设置背景图片的过程中,经常遇到背景图片不能按照自己所想的那样来自动适应屏幕,我也是尝试了很多种方法之后找到了一种适合我自身情况的设置方式。
代码如下:
body {
background-image: url("../images/backgroundImg2.jpg");
background-position: center 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
}
这样,就能成功的设置body的背景图片自动适应屏幕。
但是,其他浏览器能不能兼容我还没去确认过,目前在chrome上面是可以用的。
相关属性:
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。