html文档中图形的变形,html-(引导程序3)更改屏幕尺寸时,使用jumbotron的文本和图像会变形...

本文介绍了一位开发者在使用Bootstrap框架制作网页过程中遇到的问题,即背景图片在调整浏览器窗口大小时不能随页面一起响应式缩放,导致文本和图片等元素错位。文中提供了CSS代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天,我使用引导程序3制作了一个网页,我更改了’jumbroton’编码,使其看起来像这样:http://www.bootply.com/103783

虽然背景图片可以显示出来,但是当我调整其大小时,页面不会调整大小,而是将文本和图像放在“巨型”中的其他内容之下.

我试过在’大锅’周围放一个’容器’却没有运气… ?

尝试滚动,您会明白我的意思!

‘style.css’中的CSS代码

.bg {

background: url('/img/BG.jpg') no-repeat center center !important;

position: fixed !important;

width: 100% !important;

height: 350px !important; /*same height as jumbotron */

top:0 !important;

left:0 !important;

z-index: -1 !important;

}

.jumbotron {

margin-bottom: 40px !important;

height: 350px !important;

color: white !important;

text-shadow: black 0.1em 0.3em 0.3em !important;

background:transparent !important;

HTML“巨无霸”

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more Extras

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值