html5背景图片响应式改变,html-如何在Bootstrap中的CSS3中使用响应式背景图片

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