52

我不想使用 html 标签。这是我的CSS。我正在使用引导程序 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 技巧。

4

7 回答 7

73

对于完整的图像背景，请检查：

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;
}
于 2013-09-04T11:34:04.640 回答
19

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

演示

演示 2（不会拉伸，这就是你正在做的）

说明：您需要使用AS WELL AS的100% 100%设置，您只是为参数设置，因此背景不会垂直拉伸。XY100%X

仍然，图像会拉伸，它不会响应，如果你想按background比例拉伸，你可以寻找，background-size: cover;但 IE 会在这里给你带来麻烦，因为它是 CSS3 属性，但是是的，你可以使用 CSS3 Pie 作为填充物。此外，使用cover将裁剪您的图像。

于 2013-09-04T11:35:32.667 回答
9

我找到了这个：

满的

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%;
}
于 2016-06-13T14:51:01.453 回答
4

看一下这个，

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;
}
于 2015-12-31T15:39:57.747 回答
1

尝试这个：

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}
于 2017-10-15T11:11:53.927 回答
1

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

<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>
于 2017-07-20T11:45:42.253 回答
1

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

将“images”和“css”文件夹与“index.html”文件放在同一级别可能更常见。

如果是这种情况，并且 css 文件在其各自文件夹中的下一级，则ip-box.jpgcss 文件中指定的路径将是：'../images/ip-box.png'

于 2016-01-13T12:01:20.277 回答