html - 如何防止背景中的图像在模态模式下放大?

标签 html css bootstrap-4

我有 4 张图片和一张背景图片,我为每张图片都写了一个模态。当我单击图像并以模态模式打开时,背景图像也会放大一点。在 chrome 开发工具中,我看到一个名为 .modal-open 的新类被添加到 body 中,并且在 css 中添加了属性和值。

body.modal-open {
padding-right: 16px;
display: block; }


.modal-open .modal {
overflow-x: hidden;
overflow-y: auto; }

Link to Js fiddle

如何防止 body 元素背景中的图像放大?

最佳答案

CSS

.bg-image {
    background-image: url("Pictures/English-lang-background.jpg");
    background-size: cover;
    overflow: auto;
}

HTML

<body>
<div class="bg-image">

</div>
</body>

正确,@iamwhitebox。它解决了这个问题。

关于html - 如何防止背景中的图像在模态模式下放大?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59583148/

相关文章:

html - div 之间具有完整高度的垂直线

html - 对于非 www 到 www,我应该在我的主页上使用 rel ="canonical"吗?

html - 为什么有些字体大小在浏览器中不一致?

javascript - Bootstrap 导航栏对齐中心

html - 在 Bootstrap 中,如何让我的文本左对齐?

html - 单击后删除按钮周围的蓝色边框

javascript - jQuery - 子行 td 位于 th 下方而不是左侧(对齐)

jquery - 如何从 ipad 加载视频中删除 quicktime Logo

html - 如何使 BootStrap "carousel-item"类中的 HTML SVG 代码在移动屏幕和小屏幕中响应?

javascript - 如何在 jquery 中将 json 数据转换为 html 表?