英文:
How do I prevent the image in the background from zooming in modal mode?
问题
我有4张图片和一张背景图，为每张图片都编写了一个模态框。当我点击图片并以模态框模式打开它时，背景图也会稍微放大。在Chrome开发工具中，我看到一个新的类被添加到body元素中，名为.modal-open，同时在CSS中添加了属性和值。
body.modal-open {
padding-right: 16px;
display: block;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
如何防止body元素背景中的图片放大？
英文:
I have 4 pictures and a background image and I wrote a modal for each of them. 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.
body.modal-open {
padding-right: 16px;
display: block; }
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto; }
How do I prevent the image in the background of the body element from zooming in?
答案1
得分: 0
CSS
.bg-image {
background-image: url("Pictures/English-lang-background.jpg");
background-size: cover;
overflow: auto;
}
HTML
<body>
<div class="bg-image">
</div>
</body>
Correct, @iamwhitebox. It solves the problem.
英文:
CSS
.bg-image {
background-image: url("Pictures/English-lang-background.jpg");
background-size: cover;
overflow: auto;
}
HTML
<body>
<div class="bg-image">
</div>
</body>
Correct, @iamwhitebox. It solves the problem.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论