bootstrap中怎么设置背景图片-创新互联

本篇文章给大家分享的是有关bootstrap中怎么设置背景图片,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

创新互联建站是一家专注于网站建设、网站设计与策划设计,兰陵网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:兰陵等地区。兰陵做网站价格咨询:028-86922220

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中怎么设置背景图片-创新互联
分享链接:http://ybzwz.com/article/dhjppc.html