适合整个页面的 HTML 背景图像 + img src 已损坏答案

【问题标题】：HTML background image to fit whole page + img src are broken适合整个页面的 HTML 背景图像 + img src 已损坏
【发布时间】：2019-12-20 08:16:32
【问题描述】：

好的，所以我是 Angular 的新手，我有一个项目要做，我试图把这 4 个按钮和一个背景图像放在整个页面上。我将按钮放在表格中以帮助我安排它，但由于某种原因，背景图像仅适合这些按钮 = 表格。

此外，每当我尝试从计算机加载图像时，我都会收到损坏的图像错误。图片位置与HTML代码相同。

还有一件事，有没有快速排列按钮、图像等的方法？

提前致谢:)

<body background="here is the url of the background">

<table class="center" >
    <tr>
        <td><button class="btn btn-1 btn-sep icon-info">A</button></td>
        <button class="btn btn-4 btn-sep icon-send">B</button>
    </tr>

    <tr>
        <td><button class="btn btn-2 btn-sep icon-cart">C</button></td>
        <td><button class="btn btn-3 btn-sep icon-heart">D</button></td>
</tr>
</table>

结果看起来像这样https://imgur.com/a/ONwch4F 我希望背景也填充白色区域...

【问题讨论】：

提示：body 将适合 don 占用的空间（在您的情况下是桌子），而不是多一英寸
提示 2：布局表来自 1990 年。请改用 diva！
您的 HTML 无效。解决这个问题，然后看看你的立场。
提示 3：正如答案所示，使用 css 进行样式设置而不是内联样式属性。它有助于可读性和代码维护
这能回答你的问题吗？ CSS: stretching background image to 100% width and height of screen?

标签： html css angular-cli

【解决方案1】：

只需为背景添加一个 css 规则，例如：

body { background: white url("http://lorempixel.com/1600/900") no-repeat fixed center; }

对于您的按钮，您可以让它们在预定义的容器内自然流动，或者在容器内使用绝对定位、宽度百分比宽度/高度值。

LE：如果你想保持你的 CSS 内联，只需将 body css 规则放在“样式”属性中。即<body style="background...">

【讨论】：

【解决方案2】：

要将背景图片应用到整个页面，CSS Tricks 上有一个很好的示例：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')";
  background-size: cover;
}

最后两个过滤器用于 IE。

【讨论】：

【解决方案3】：

只需使用 CSS 之类的添加背景

body{
background-image: : url("path");
background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* This will make image fit according to body size*/
}

请确保您使用正确的图像路径，或者您可以在调试器上的网络选项卡上检查您的图像是否正在加载

【讨论】：

我试过了，但是当我尝试从我的电脑上放一张照片时它不起作用，但它确实适用于通过 url 从互联网上下载的照片...imgur.com/hjrUB1W
然后检查您的图片网址

【解决方案4】：

请检查图像文件路径。您在图像路径中使用了 \ 而不是 /。这就是为什么你的形象坏了。你的路径应该是这样的：

<img src="images/photo.jpg" alt="aaa">

试试看。这将运行良好。

你想在哪里设置背景图片？到整个身体还是只到桌子的背景？因为在上面的代码中，您想将 bg-image 设置为 body，并且根据代码的屏幕截图，您已将 image 设置为 id 为 bg 的 div。

请向我们提供您的正确代码，以便我们找到更好的解决方案。谢谢。

【讨论】：

【解决方案5】：

您可以根据需要使用以下 CSS 代码。

body, html {
  height: 100%;
}

.bg {
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

【讨论】：