Html 消除全屏img中的白色条纹_Html_Css

Html 消除全屏img中的白色条纹

html css

Html 消除全屏img中的白色条纹,html,css,Html,Css,我目前正试图建立一个登录页，我有一个问题。它的周围有一些白色条纹我希望图片是全屏的，没有任何条纹等车身上会自动应用填充只需将此添加到css中 <!DOCTYPE HTML> <head> <title>Szafranowka - Apartments & Restaurant </title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Co

我目前正试图建立一个登录页，我有一个问题。它的周围有一些白色条纹

我希望图片是全屏的，没有任何条纹等

车身上会自动应用填充

只需将此添加到css中

<!DOCTYPE HTML>
<head>
    <title>Szafranowka - Apartments & Restaurant </title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
    <div id="container">

        <div id="background">
            <img src="background.jpg" id="background"> </img>
        </div>

    </div>
</body>
</html>

编辑：在评论中跟进的解决方案

您需要删除

标记并更改css中的背景div

body{
  padding:0;
  margin:0;
}

浏览器将其自己的默认样式应用于您可以使用自己的css更改的网站。看看这个

解决问题的简单方法是添加css:

#background
{
    width: 100%;
    height: auto;
    background: url("background.jpg");
    background-size: cover;
    opacity: 0.6;
    position: relative;
}

默认情况下，每个HTML标记都有一个浏览器预定义的外观/样式，例如，在Chrome上，body具有

margin:8px

。您需要重置所有这些预定义的样式规则，以避免出现意外，请阅读

此外，为了拉伸图像以覆盖所有可见区域，您需要确保

body

具有

width:100vw（视口宽度）和<代码>高度：100vh（视口高度）和其他所有内容都有100%
，或从父对象继承
在
处处理代码段完成后，它看起来是这样的：知道如何删除底部，非常大的条纹吗？：）我会说这是因为图像的高度不够长，无法覆盖整个页面。我将在我的答案中添加解决方案。可以拉伸图像，而不必将其转换为带有背景图像的div。但是，IE和旧的边缘版本不支持。在保持其纵横比的同时，这可能吗？我总是把它设为背景。你可以在我附在这里的答案的片段中看到它的作用<代码>背景大小：封面

不保持纵横比，也不确保整个图像部分可见，它从中心（50%50%）缩放，并成功覆盖整个区域，无论图像有多小。您只能使用决定大小的父容器或父容器来控制原点。可能的副本现在有机会使其“响应”吗？它是响应的，如果您检查我的代码段，调整大小不会影响图像覆盖整个区域的事实。如果“响应性”指的是图像拉伸（覆盖整个区域）并仍然显示图像的所有部分，那么在不损失大量质量的情况下是不可能的。使用

objectfit:contain检查它的外观而不是对象匹配：覆盖在较小的屏幕上。在手机上使用它会更好，因为高度通常是宽度的两倍或两倍以上。你需要在媒体查询中包装它，这样它只在手机上应用contain
，并在平板电脑+（包括桌面）上保持cover。我明白了，我想这样实现smth：只使用html和css代码？因为当我尝试在图形上应用文字时，它看起来很糟糕，文字被拉伸和像素化。当然，在图形上应用文字真的是2000年，除非1）你是一个懒惰的开发人员，2）维护网站的人有很好的Photoshop技能，并且可以为多个设备/断点提供更改版本，3）你不在乎反应能力。
body{
   margin:0;
}