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>

我在＆＃39;技能组中做了同样的事情。部分但不能在我的部分实现它。这是我的两个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

这是你想要的吗？

我在text-align:right;

上使用了.aboutMe

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

更新了html结构

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我最后休息一下喝酒（我现在是设计师/制作这个网站大约5个小时），在我休息之后，我坐下来，吸了一口气，然后又开始了约一节。现在想起来就容易多了：

<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而不是一个类名。更有意义。牢记这一点。

的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;
}

背景图像无法正常工作？

3 个答案: