Question

在我的登录页面中，只要减小浏览器大小，背景图像就会重复自我。我再次搜索它并应用所有可用的建议和代码但未能删除重复。所以请帮我删除这个重复。

<html>
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-  scalable=no' name='viewport'>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Themes/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Themes/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <style>
        .alertify-notifier .ajs-message.ajs-error{
    color: white;
}
    </style>
</head>

<body style="background-image: url('../../../Images/BackgroundImages/Login.jpg'); background-size: 100%,100%;" onload="authenticateuser()">
    <div class="form-box" id="login-box" style="box-shadow: 0 16px 32px 0 rgba(167, 172, 170, 0.62), 0 24px 80px 0 rgba(0, 0, 0, 0.2);">
        <div class="header">
            Sign In
        </div>

    </div>
    <!-- jQuery 2.0.2 -->
    <script src="~/Scripts/JQuery/jquery-3.1.0.min.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/jquery.validate-vsdoc.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/alertify.min.js"></script>
</body>
</html>

Answer 1

如果没有工作的小提琴或类似的东西，很难看出错误，但是有一个名为background-repeat的CSS属性可能就是你正在寻找的东西对于。如果您想避免将背景图片平铺在no-repeat的整个区域，则应将其设置为div。

根据您的评论，您还需要background-size: cover来保持最大的尺寸。请注意，如果背景图像的宽高比与容器尺寸不同，则会剪切背景图像的一部分。

Answer 2

添加样式如下

<style>
body {
   background-image: url('../../../Images/BackgroundImages/Login.jpg');
   background-repeat: no-repeat;
   background-size:cover;
}
</style>

Answer 3

根据您尝试以100％覆盖率完成的内容，您还需要在样式中使用background-size: cover。您还可以使用background-position属性来定位背景图像，因为当您使用封面时，它会以不同的大小进行不同的裁剪，因为无论大小如何都会设置为填充。我经常将媒体查询与background-position结合使用，以确保它在不同尺寸下看起来很好。

<body style="background-image: url('../../../Images/BackgroundImages/Login.jpg'); background-size: cover; background-repeat: no-repeat" onload="Verify()">

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 4

尝试使用background-size:contain和background-repeat:no-repeat

<body style="background-image: url('../../../Images/BackgroundImages/Login.jpg'); background-size: contain; background-repeat:no-repeat" onload="Verify()">

你可以简单地写一下：

<body style="background: url('../../../Images/BackgroundImages/Login.jpg') no-repeat scroll center center / contain transparent;" onload="Verify()">

要查看contain和cover之间的差异，请参阅此处： Difference between background-size:cover and background-size:contain

减少浏览器大小时重复图像

4 个答案: