当前位置 : 主页 > 手机开发 > 其它 >

bootstrap怎么设置背景图片

来源:互联网 收集:自由互联 发布时间:2021-08-19
bootstrap怎么设置背景图片自动适应 浏览器:chrome 使用CSS:bootstrap(这个可能会影响到我们css的设置,所以还是提一下) 在设置背景图片的过程中,经常遇到背景图片不能按照自己所想

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 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

相关推荐:《bootstrap教程》

以上就是bootstrap怎么设置背景图片的详细内容,更多请关注自由互联其它相关文章!

网友评论