【问题标题】:Removing white stripes in fullscreen img去除全屏img中的白色条纹
【发布时间】:2018-01-14 06:52:48
【问题描述】:

我目前正在尝试制作目标网页,但遇到了问题。 <img> 周围有一些白色条纹,它是looks like this

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

<!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:

#container
{
    width: 100%;
    height: 100%;
}

#background
{
    width: 100%;
    height: auto;
    opacity: 0.6;
    position: relative;
}

【问题讨论】:

标签: html css


【解决方案1】:

填充会自动应用于正文。

只需将其添加到您的 css 中

body{
  padding:0;
  margin:0;
}

编辑:在 cmets 中跟进的解决方案

您将需要删除 &lt;img&gt; 标记并更改 CSS 中的背景 div

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

【讨论】:

  • 完成之后,它看起来像这样:gyazo.com/408a9eb76f57ce43500c29a88d895edd 知道如何去除底部的大条纹吗? :)
  • 我会说那是因为图像高度不足以覆盖整个页面。我将在我的答案中添加解决方案。
  • 可以拉伸图像,而不必将其变成带有背景图像的 div。不过,不支持 IE 和较旧的 Edge 版本。
  • 在保持其纵横比的同时这是否可行?我一直只是恢复将其设置为背景。
  • 您可以在我附加到答案的 sn-p 中看到它的实际效果。 background-size: cover 不保持纵横比或确保整个图像部分可见,它从中心(50% 50%)缩放并成功覆盖整个区域,无论图像多么小。您只能使用developer.mozilla.org/en-US/docs/Web/CSS/background-origin 或决定大小的父容器来控制原点。
【解决方案2】:

默认情况下,每个 HTML 标记都具有浏览器预定义的外观/样式,例如,在您的情况下,正文在 Chrome 上具有 margin: 8px。您需要重置所有这些预定义的样式规则以避免意外,请在https://cssreset.com/what-is-a-css-reset/阅读有关 CSS 重置的信息

此外,为了拉伸图像以覆盖所有可见区域,您需要确保body 具有width: 100vw;(视口宽度)和height: 100vh;(视口高度),其他所有内容都具有100%两者兼有或从父母那里继承。

https://codepen.io/Raven0us/pen/KZQejX工作sn-p

【讨论】:

  • 现在有机会让它“响应式”吗?
  • 它是响应式的,如果你检查我的sn-p,调整大小不会影响图像覆盖整个区域的事实。如果“响应”是指让图像拉伸(覆盖整个区域)并仍然显示它的所有部分,那么在不损失很多质量的情况下是不可能的。在较小的屏幕上使用object-fit: contain; 而不是object-fit: cover; 检查它的外观。因为高度通常是宽度的两倍或更多,所以在手机上使用它会更好看。
  • 您需要将其包装在媒体查询中,以便它仅在手机上应用contain,并在平板电脑+(包括桌面)上保留cover
  • 我明白了,那又如何:我想像这样实现:gyazo.com/6b9fb9042820d9ef9b27cb054c622b92 仅使用 html 和 css 代码?因为当我尝试在图形上应用文字时,它看起来很糟糕,文字被拉伸和像素化。
  • 当然,在图形上应用文字实际上是 2000 年代,除非 1) 你是一个懒惰的开发人员,2) 维护网站的人具有非常好的 Photoshop 技能,并且可以为多种设备提供修改版本/breakpoints, 3) 你不关心响应能力。
【解决方案3】:

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

一个简单的解决方法是添加 css:

body{
   margin:0;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多