javascript 如何使背景图像在 html 中不可调整大小?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14076972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 20:39:10  来源:igfitidea点击:

How to make background image not resizable in html?

javascripthtmlcss

提问by Michael Yuzhiheng Xiao

body {
    background: url('../../asset/background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This is my code for an background image. I want the image to be not resizable when I am resizing the browser.

这是我的背景图像代码。我希望在调整浏览器大小时图像不可调整大小。

回答by Elliot B.

You shouldn't use background-size:cover;. With that CSS you're telling the browser you want the background image to expand to cover the whole background area.

你不应该使用background-size:cover;. 使用该 CSS,您告诉浏览器您希望背景图像扩展以覆盖整个背景区域。

If you want the background image centered and not resized, just do this:

如果您希望背景图像居中而不调整大小,请执行以下操作:

body {
    background: url('../../asset/background.jpg') no-repeat center center;
}

You can position the background in any manner you like, here are more options.

您可以以您喜欢的任何方式定位背景,这里有更多选项

回答by user1884047

Try setting the background size:

尝试设置背景大小:

background-size: 100px 100px;

回答by syed mohsin

Setting the background-sizeto coveroccupies the space of the div. See this.

设置background-sizecover占用div的空间。看到这个

Remove the background-sizeproperty and it will work fine.

删除该background-size属性,它将正常工作。