背景图像无法正常工作？

Question

我正在尝试在某些文本上获取背景图像，该文本位于屏幕左侧，而文本位于右侧。我希望它是背景图片，所以我可以这样做：

background-position: left center;

我在上面的同一个 CSS 文件中做了同样的事情，但是，这一次它不想工作，我一生都无法弄清楚为什么。

HTML：

<section class="skillset">
        <div class="spaceage">
            <h1>-filler-</h1>
            <p>-filler-</p>
        </div>
        <div class="ability">
            <h3>-filler-</h3>
            <p>-filler-</p>
            <img src="img/xdlogo.svg" alt="Adobe Experience Design Logo">
            <img src="img/pslogo.png" alt="Adobe Photoshop Logo">
            <img src="img/html5logo.png" alt="HTML 5 Logo">
            <img src="img/css3logo.svg" alt="CSS 3 Logo">
        </div>
    </section>

    <section class="aboutMe">
        <div class="aboutMeText">
            <h1>-filler-</h1>
            <p>-filler-</p>
            <p>-filler-</p>
        </div>
    </section>

我在“技能组”部分中做了同样的事情，但在“关于我”部分中无法实现。这是我的 CSS：

.skillset {
    font-family: 'Montserrat', sans-serif;
    position: relative;
    margin-top: 50px;
    background-image: url(img/asteroid.gif);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 40%;
}

.aboutMe {
    margin-top: 150px;
    margin-right: 5%;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    background-image: url(img/asteroid.gif);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40%;
}

我不明白为什么背景图片没有显示在文本旁边。其他人知道为什么吗？

编辑： 我现在发现，如果我使用 HTML 中文本下方的标签添加图像，背景图像会奇迹般地出现！？！？！

Answer 1

这是你想要的吗？

我在.aboutMe上使用了text-align:right;

.skillset {
  font-family: 'Montserrat', sans-serif;
  position: relative;
  margin-top: 50px;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 40%;
}

.aboutMe {
text-align:right;
  margin-top: 150px;
  margin-right: 5%;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40%;
}

<section class="skillset">
  <div class="spaceage">
    <h1>-filler-</h1>
    <p>-filler-</p>
  </div>
  <div class="ability">
    <h3>-filler-</h3>
    <p>-filler-</p>
    <img src="img/xdlogo.svg" alt="Adobe Experience Design Logo">
    <img src="img/pslogo.png" alt="Adobe Photoshop Logo">
    <img src="img/html5logo.png" alt="HTML 5 Logo">
    <img src="img/css3logo.svg" alt="CSS 3 Logo">
  </div>
</section>

<section class="aboutMe">
  <div class="aboutMeText">
    <h1>-filler-</h1>
    <p>-filler-</p>
    <p>-filler-</p>
  </div>
</section>

更新的 html 结构

.a {
  text-align: right;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 50%;
}

body {
  padding: 15px;
}

<div class="a">
  <h1>This is some textThis is some textThis is some textThis is some textThis is some textThis is some textThis is some text</h1>
</div>

Answer 2

我最后休息了一会儿，喝了一杯（我已经设计/制作这个网站大约 5 个小时了），休息后我坐下来，深呼吸，然后从 about 部分重新开始。现在想起来要容易得多，这就是我想出的：

<div class="about">
        <h1>Hi, I'm Jack</h1>
        <div class="aboutTxt">
            <p>filler</p>
            <p>filler</p>
        </div>
    </div>

.about {
    padding: 0 5%;
    background-image: url(img/programmer.gif);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30%;
    margin-top: 225px;
    font-family: 'Montserrat', sans-serif;
    margin-left: 5%;
}

.about h1 {
    margin-bottom: 30px;
    color: #2B9DFF;
    text-transform: capitalize;
}

.aboutTxt {
    text-align: justify;
}

.about h1,
.aboutTxt {
    margin-left: 50%;
    background: rgba(211, 211, 211, 0.1);
}

Tbh，我做了一个大问题，如果我休息一下，只是想一想，就不会成为问题。感谢大家的帮助，但我得到了这个啊啊啊！

Answer 3

为什么不单独设置 p 和 h1 的样式？

因为你最终会更灵活。 顺便说一句，该部分应该有一个 id aboutMe 而不是类名。更有意义。请记住这一点。

Jsfiddle

https://jsfiddle.net/L0cbe709/

HTML：

<section class="skillset">
  <div class="spaceage">
    <h1>-filler-</h1>
    <p>-filler-</p>
  </div>
  <div class="ability">
    <h3>-filler-</h3>
    <p>-filler-</p>
    <img src="img/xdlogo.svg" alt="Adobe Experience Design Logo">
    <img src="img/pslogo.png" alt="Adobe Photoshop Logo">
    <img src="img/html5logo.png" alt="HTML 5 Logo">
    <img src="img/css3logo.svg" alt="CSS 3 Logo">
  </div>
</section>

<section class="aboutMe">
  <div class="aboutMeText">
    <h1>-filler-</h1>
    <p>-filler-</p>
    <p>-filler-</p>
  </div>
</section>

CSS

.ability {
  width: 100%;
}

.skillset {
  font-family: 'Montserrat', sans-serif;
  position: relative;
  margin-top: 50px;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 40%;
}

.aboutMe {
  width: 100%;
  margin-top: 150px;
  margin-right: 5%;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40%;
}

.aboutMe p {
  text-align: right;
}

.aboutMe h1 {
  text-align: center;
}