不能在容器中放置多个图像[重复]

Question

我试图将 2 张图片并排放置，并在两张图片的中心放置一些文字，但是在使用 CSS 和 background :(url) 添加第一张图片后，我无法添加第二张图片，因为它只是覆盖第一个，我将图像直接放在 div 中，我无法在其中放置文本。

正如您在下面的HTML 中看到的那样，如果我将一张图片放入HTML 并通过CSS，我无法在其上放置文字，如果我将其放入CSS，它们只会覆盖彼此。

HTML 和 CSS

#image{
    height: 400px;
    background-color: black;
    background: url("https://www.dizzion.com/wp-content/uploads/2017/06/Working-on-Laptop-x1200-1024x683.jpg");
}

<section id="images">
  <h1>affortable shit</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad repudiandae hic minus commodi tempore.</p>
  <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</section>

Answer 1

Screenshot 只需用这个替换你的代码。

在 css 中使用部分标签选择器

section{
  height: 400px;
  background-color: black;
  background-image: url(https://www.dizzion.com/wp-content/uploads/2017/06/Working-on-Laptop-x1200-1024x683.jpg);        
}

<section id="images">
  <h1>affortable shit</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad repudiandae hic minus commodi tempore.</p>
  <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</section>