Html 无法根据分辨率设置背景图像。背景中出现多个图像_Html_Css

Html 无法根据分辨率设置背景图像。背景中出现多个图像

html css

Html 无法根据分辨率设置背景图像。背景中出现多个图像,html,css,Html,Css,我想展示一张图片作为背景。但它重复显示相同的图像。我希望它应该设置，如果显示器分辨率高 <style> img { width: 100%; max-width: 1363px; } </style> <body background="~/images/loginBG.jpg"> img { 宽度：100%；最大宽度：1363px；

我想展示一张图片作为背景。但它重复显示相同的图像。我希望它应该设置，如果显示器分辨率高

<style>

        img
        {
            width: 100%;
            max-width: 1363px;
        }
    </style>


    <body background="~/images/loginBG.jpg">


img
{
宽度：100%；
最大宽度：1363px；
}

添加

设置

查看差异

.wrepeat
{
背景：url（“https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png");
背景尺寸：封面；
背景重复：无重复；
高度：800px；
}
虫子
{
背景：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png");
高度：800px；
}

您应该使用@media添加分辨率大于“1363px”的样式，并将该角色设置为使背景覆盖所有宽度：

@media (min-width: 1363px) {
  body {
    background-size: cover;
  }
}

此外，添加到此角色以避免重复bg：

body {
background-repeat: no-repeat;
}

改为使用背景图像属性

@media (min-width: 1363px) {
  body {
    background-size: cover;
  }
}

body {
background-repeat: no-repeat;
}