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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值