Question

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

<style>

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


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

Answer 1

设置

background-size: cover;
background-repeat: no-repeat;

查看差异

.wrepeat
        {
           background: url("https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png");
             background-size:cover;
            background-repeat:no-repeat;
            height:800px;
        }
         .worepeat
        {
         background: 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");
            height:800px;
           
            
        }

<html>
<body>

    <div class="wrepeat" ></div>
    
  

    <div class="worepeat" ></div>
    </body>
    </html>

Answer 2

添加

background-repeat: no-repeat;

Answer 3

你应该使用@media为超过＆＃34; 1363px＆＃34;的分辨率添加样式。并设置该角色以使背景覆盖所有宽度：

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

另外，添加到此角色不重复bg：

body {
background-repeat: no-repeat;
}

无法根据分辨率设置背景图像。多个图像进入背景

3 个答案: