html-如何在Bootstrap中的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个解决方案
69 votes
对于完整的图像背景,请检查以下内容:
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;
}
fiskolin answered 2020-06-26T07:57:36Z
17 votes
您需要使用background-size: 100% 100%;
演示版
演示2(不会拉伸,这是您在做什么)
说明:您需要使用为background-size: cover; AS以及cover AS设置的background,仅为X参数设置100%,因此背景不会垂直拉伸。
尽管如此,图像仍会伸展,但不会响应,如果您想按比例伸展background,可以寻找background-size: cover;,但是IE会在这里给您带来麻烦,因为它是CSS3属性,但是可以,您可以使用CSS3 Pie 作为polyfill。 另外,使用cover将裁切图像。
Mr. Alien answered 2020-06-26T07:58:14Z
9 votes
我找到了这个:
充分
一个易于使用的全页面图像背景模板,适用于Bootstrap 3网站
[HTTP://start bootstrap.com/template-overviews/full/]
要么
在您的主要div容器中使用:
html
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%;
}
raduken answered 2020-06-26T07:59:04Z
4 votes
看一下这个,
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;
}
Levent Divilioglu answered 2020-06-26T07:59:24Z
1 votes
文件路径ip-box.jpg表示css文件与images文件夹处于同一级别。
将“ images”和“ css”文件夹与“ index.html”文件放在同一级别可能更常见。
如果是这种情况,并且css文件在其相应文件夹中为下一级,则css文件中指定的ip-box.jpg的路径为:'../images/ip-box.png'
wkille answered 2020-06-26T07:59:53Z
1 votes
设置响应式和用户友好的背景
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
pradip kor answered 2020-06-26T08:00:14Z
1 votes
试试这个:
body {
background-image:url(img/background.jpg);
background-repeat: no-repeat;
min-height: 679px;
background-size: cover;
}
RiggsFolly answered 2020-06-26T08:00:34Z