如何在不干扰其他元素的情况下将图像添加到页面的一角？

Question

我是代码的新手，目前正在学习html和css，现在我正在尝试重新创建我制作的模型。到目前为止，我没记错。

但是我原本打算将css中的图像添加为身体的背景图像，然后我对自己想，这可能不是这样做的方法，因此我尝试将其添加到html中，并试图弄清楚如何以使其不干扰左侧的文本部分。

Answer 1

编辑：对不起，我的朋友在我完成输入之前错误地关闭了浏览器。我添加了一个片段来演示。

在这种情况下，我认为您是在谈论左下角的蓝色三角形图像；

我认为该图像适合作为背景图像。尽管这是一种可行的方法，但不一定要成为背景。也可能是容器div的背景。 background-position: bottom right;如果希望包含div响应，可以为background-size使用百分比。当然，背景图像将是最简单的解决方案。

也就是说，有充分的理由使您希望该图像成为内容图像（html <img>标签）。有关html img和css background-image之间的区别，优点和缺点的一些想法和考虑，请参阅此问题When to use IMG vs. CSS background-image?的答案。

如果您仍然想将图像用作html <img>：

您可以在容器div中放置图像，可以使用不同的方法在div中放置图像，可以使用父填充将其推入右下角并在左侧和顶部留出空间，或者可以使用绝对定位，并且可能还有其他方法。您应该将position: relative;放在容器上，以便绝对可以在其中放置子容器。

然后在该容器中创建子容器以放置您的文本/其他内容。给它position:absolute; top:0; left:0; width:100%; height:100%;，以便它填充并覆盖父容器。将您的文本/内容放入此div。

这基本上是通过将一个div绝对放置在另一个div之上来创建伪背景图像。父母可以使用相对定位，孩子可以使用百分比，因此整个模式仍然可以响应。

.fake-body {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.parent-container {
  position: relative;
  box-sizing: content-box;
  margin: 8% 10%;
  height: 80%;
  width: 80%;
  background-color: #fff;
  border: 1px solid #000;
}
.fake-image {
  box-sizing: content-box;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 80%;
  width: 80%;
  background-image: linear-gradient(to bottom right, white 0%, white 50%, #78a0ff 51%, #78a0ff 100%);
}
.child-container {
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.child-container h3 {
  text-align: center;
  margin: 50px 20px 20px;
  color: #000;
}
.child-container p {
  margin: 20px 20px 30px;
  color: #000;
}

<div class="fake-body">
  <div class="parent-container">
    <div class="fake-image"></div>
    <div class="child-container">
      <h3>Lorem Ipsum</h3>
      <p>Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit
      in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

请注意，我没有链接真实图像，但是<div class="fake-image"></div>表示一个<img>标签，可以用相同的方式放置它。

也不需要.fake-body div，我只是用它来解决stackoverflow的代码片段古怪。