如何在引导程序中使用css3中的响应式背景图像

我不想使用HTML标记。 这是我的CSS。 我正在使用bootstrap 3.0。

background:url('images/ip-box.png')no-repeat; background-size:100%; height: 140px; display:block; padding:0 !important; margin:0; 

在100%缩放这是好的。 但是当我放大约180%时,图像会从上到下短,我想要一些CSS技巧。

7 Solutions collect form web for “如何在引导程序中使用css3中的响应式背景图像”

对于完整的图像背景,请检查:

 html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

你需要使用background-size: 100% 100%;

演示

演示2 (不会伸展,这是你在做什么)

说明:您需要使用100% 100%因为它为X Y设置,您只是为X参数设置100% ,因此背景不会垂直拉伸。


尽pipe如此,图像将伸展出来,它不会响应,如果你想按比例拉伸background ,你可以寻找background-size: cover; 但IE会在这里为你创build麻烦,因为它是CSS3属性,但是,是的,你可以使用CSS3饼作为一个polyfill。 另外,使用cover将裁剪你的形象。

我find了这个:

充分

Bootstrap 3网站的一个易于使用的完整页面图像背景模板

http://startbootstrap.com/template-overviews/full/

要么

在你的主div容器中使用:

HTML

 <div class="container-fluid full"> </div> 

CSS:

 .full { background: url('http://placehold.it/1920x1080') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; height:100%; } 

看一下这个,

 body { background-color: black; background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

文件path'images/ip-box.png'意味着css 文件与images 文件夹处于同一级别。

将'images'和'css'文件夹放在与'index.html'文件相同的级别可能更常见。

如果是这种情况,并且css文件在其各自的文件夹中下一层,那么在css文件中指定的ip-box.jpg的path是: '..http://img.dovov.comip-box.png' ip-box.jpg '..http://img.dovov.comip-box.png'

设置响应和用户友好的背景

 <style> body { background: url(image.jpg); background-size:100%; background-repeat: no-repeat; width: 100%; } </style> 

尝试这个:

 body { background-image:url(img/background.jpg); background-repeat: no-repeat; min-height: 679px; background-size: cover; } 
  • 通过npm安装bootstrap的目的是什么?
  • 如何创build与Bootstrap 3兼容的粘性页脚
  • Twitter引导多个模式的错误
  • 将link_to与embedded式HTML一起使用
  • 如何使用Twitter Bootstrap的popup窗口来显示图片?
  • Bootstrap 3格没有差距
  • Bootstrap 3使用Chevron图标折叠显示状态
  • 在Bootstrap 3中向工具提示添加换行符
  • 我怎样才能禁用链接的引导hover颜色
  • Twitter Bootstrap中的响应式表格处理
  • 如何包含位于node_modules文件夹内的脚本?