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

Question

I have 4 pictures and a background image and I wrote a modal for each of them.我有 4 张图片和一张背景图片，我为每张图片都写了一个模态。 When I click on the image and it opens in modal mode, the background image also zooms in a bit.当我单击图像并以模态模式打开时，背景图像也会放大一点。 In chrome dev tools, I see that a new class is added to body called .modal-open and properties and values are added in the css.在 chrome 开发工具中，我看到一个名为 .modal-open 的新类被添加到主体中，并且属性和值被添加到 css 中。

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


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

Link to Js fiddle链接到 Js 小提琴

How do I prevent the image in the background of the body element from zooming in?如何防止主体元素背景中的图像放大？

Answer 1

CSS CSS

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

HTML HTML

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

</div>
</body>

Correct, @iamwhitebox.正确，@iamwhitebox。 It solves the problem.它解决了这个问题。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-01-10 22:04:24

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-01-10 22:04:24

解决方案1
0 已采纳 2020-01-10 22:04:24