个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我使用 Bootstrap 4 构建了一个具有视差效果的页面和一个图像库。问题是，当我打开模式时，背景图像会跳跃/调整大小，我觉得我已经尝试了一切来解决这个问题。BS 很好地保持了所有其他元素(无论是否有滚动条)的原样，但背景图像却没有。
<
// call ekko-lightbox
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});body {
position: relative;
font-size: 100%;
}
body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-family: "Lato", sans-serif;
line-height: 1.8;
}
body,
html {
height: 100%;
color: #666666;
}
.bgimg-1 {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: black;
background-image: url("https://cdnb.artstation.com/p/assets/images/images/005/540/665/large/thorsten-erdt-nami-small.jpg?1491824822");
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<body>
<header class="container-fluid h-100 bgimg-1" id="home">
<div class="row h-100 justify-content-center align-items-center">
<div class="col col-sm-auto text-white text-center">
<h2 class="d-md-none">ART OF</h2>
<h2 class="bg-dark d-block">THORSTEN ERDT</h2>
<h2 class="d-none d-md-block">ILLUSTRATION</h2>
</div>
</div>
</header>
<section class="container" id="editorial">
<div class="row justify-content-center">
<a href="IMG" data-toggle="lightbox" data-gallery="img-gallery"><img src="thumbnail" alt="captiontext1" style="width:50px"></a>
</div>
</section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>如果我设置
background-size:{auto;}
background-position: {left top;}
它不会再跳跃，但也不会为较小的设备调整大小，所以这是不行的。
如果我设置
overflow-y:{scroll;}
它仍然为所有内容添加填充，导致所有内容跳跃......
body.modal-open {padding:0;}
修复了这个问题，但现在导航栏是唯一跳跃的东西。哦，当然我也可以在模式打开时滚动页面。
如果有人有其他想法如何解决这个问题，我洗耳恭听。
最佳答案
当你打开一个bootstrap-modal时，它会删除垂直滚动(如果有的话)，所以你感觉你的背景图像在跳跃。这就是功能。
如果您想覆盖它的 css ，您可以在 css 末尾添加以下代码。
.modal-open {
overflow-y: inherit;
}
最好使用overflow-y:inherit而不是使用overflow-y:scroll，如下所述:
.modal-open {
overflow-y: scroll;
}
查看它正在 Demo 中运行
编辑:
.modal-open{
padding:0 !important;
overflow-y: auto;
}
将以上代码添加到您的 css 中。你所有的问题都解决了。了解更多详情:Click me
希望这个解决方案对您有用。
如果有任何疑问，请在评论区评论。
关于bootstrap-4 - 打开模态时背景图像跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52388273/
27
4
0
我来自 Asp.Net 世界，试图理解 Angular State 的含义。 什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？ 我听到很多人
我一直在寻找 3 态拨动开关，但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀！