如何将我的<p>文本</p>放在背景图像的末尾，保持<h1>不变？

huangapple
go评论274阅读模式
英文:

How to place my <p>texts</p> after the end of the background image, keeping leading <h1> as is?

问题

The URL is https://sputnick.fr/

The HTML is:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
    body {
      background-color: #15141A;
      background-image: url("https://sputnick.fr/header.jpg");
      color: white;
      font-family: "Arial";
      font-size: 16px;
    }

<!-- language: lang-html -->
    <h1>foobar</h1>
    <p>lorem ipsum doloris</p>
    <p>lorem ipsum doloris</p>
    <p>lorem ipsum doloris</p>
    <p>lorem ipsum doloris</p>

<!-- end snippet -->

I searched MDN and other resources, but I don't get how to do this.

I want all <p>xxxx</p> after the background image.

Is it possible?

英文:

The url is https://sputnick.fr/

The HTML is:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  background-color: #15141A;
  background-image: url(&quot;https://sputnick.fr/header.jpg&quot;);
  color: white;
  font-family: &quot;Arial&quot;;
  font-size: 16px;
}

<!-- language: lang-html -->

&lt;h1&gt;foobar&lt;/h1&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;

<!-- end snippet -->

I searched MDN and other ressources, but I don't get how to do this.

I want all &lt;p&gt;xxxx&lt;/p&gt; after the background image.

Is it possible?

答案1

得分: 2

你可以通过在h1标签底部添加内边距或外边距来实现。

查看这个代码示例：codepen.io/gd17/pen/LYJyoeM

.heading { margin-bottom: 18%; }

我已经为h1添加了一个自定义类“heading”，并使用基于百分比的CSS内边距。

英文:

You can do it by adding padding or margin at the bottom of the h1 tag.

Check this code pen: codepen.io/gd17/pen/LYJyoeM

.heading { margin-bottom: 18%; }

I have added a custom class "heading" to h1 and added % based CSS padding.

答案2

得分: 1

这里是您要翻译的内容：

如果您不确定是否需要重复的背景图像，但想要明确表达“在Y之后我想要X”的方法是将它们变成DOM顺序中不同的连续元素。类似于：

<!-- language: lang-css -->
header {
  background-image: url("https://sputnick.fr/header.jpg");
  height: 200px;
  width: 100%;
}

h1 {
  color: white;
}

<!-- language: lang-html -->
<header>
  <h1>
    网站标题
  </h1>
</header>
<main>
  <p>
    一些内容
  </p>
  <p>
    更多内容
  </p>
</main>

如果您确实希望背景图像在整个网页中重复，您有很多选择，但我可能会这样做：

<!-- language: lang-css -->
.wrapper {
  background-image: url("https://sputnick.fr/header.jpg");
  height: 800px;
  width: 100%;
  color: white;
}

.content {
  margin-top: 650px;
}

<!-- language: lang-html -->
<div class="wrapper">
  <h1>
    网站标题
  </h1>
  <div class="content">
    <p>
      一些文本
    </p>
  </div>
</div>

这依赖于硬编码的margin-top，它与您的背景图像的高度匹配 - 如果这个高度发生变化，那么这段代码将失效。如果这是可能发生的情况，那么您还可以考虑同时采用这两种方法的组合：

<!-- language: lang-css -->
body {
  background-image: url("https://sputnick.fr/header.jpg");
  color: white;
}

h1 {
  position: absolute;
  top: 0;
}

<!-- language: lang-html -->
<body>
  <header>
    <img src="https://sputnick.fr/header.jpg">
    <h1>
      网站标题
    </h1>
  </header>
  <main>
    <p>
      一些内容
    </p>
    <p>
      更多内容
    </p>
  </main>
</body>

这种方法的缺点是依赖position: absolute，但如果您改变了背景图像的尺寸，它将表现得更好。

希望这些内容能给您一些灵感！

英文:

It's not clear whether or not you want the repeating background images, but the foolproof way to say "I want X after Y" is to make them different, consecutive elements in the DOM order. Something like

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

header{
  background-image: url(&quot;https://sputnick.fr/header.jpg&quot;);
  height: 200px;
  width: 100%;
}

h1{
  color: white;
}

<!-- language: lang-html -->

&lt;header&gt;
  &lt;h1&gt;
    Site Title
  &lt;/h1&gt;
&lt;/header&gt;
&lt;main&gt;
  &lt;p&gt;
    Some content
  &lt;/p&gt;
  &lt;p&gt;
    Some more content
  &lt;/p&gt;
&lt;/main&gt;

<!-- end snippet -->

If you DO want the background-image to repeat throughout your entire webpage, you have lots of options, but I would probably do something like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wrapper{
  background-image: url(&quot;https://sputnick.fr/header.jpg&quot;);
  height: 800px;
  width: 100%;
  color: white;
}

.content{
  margin-top: 650px;
}

<!-- language: lang-html -->

&lt;div class=&quot;wrapper&quot;&gt;
  &lt;h1&gt;
    Site Title
  &lt;/h1&gt;
  &lt;div class=&quot;content&quot;&gt;
    &lt;p&gt;
    Some text
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

This does rely on a hard-coded margin-top that matches the height of your background-image - if this height ever changes, then this code will break. If that is a likely scenario, then you could also consider doing kind of a tandem of both approaches

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body{
  background-image: url(&quot;https://sputnick.fr/header.jpg&quot;);
  color: white;
}
h1{
  position: absolute;
  top: 0;
}

<!-- language: lang-html -->

&lt;body&gt;
  &lt;header&gt;
  
    &lt;img src=&quot;https://sputnick.fr/header.jpg&quot;&gt;
    &lt;h1&gt;
      Site Title
    &lt;/h1&gt;
&lt;/header&gt;
  &lt;main&gt;
      &lt;p&gt;
      Some content
    &lt;/p&gt;
    &lt;p&gt;
      Some more content
    &lt;/p&gt;
  &lt;/main&gt;
&lt;/body&gt;

<!-- end snippet -->

This has the disadvantage of relying on position: absolute, but will behave better if you ever change your background image's dimensions.

Hopefully this gives you some ideas to work with!

答案3

得分: 1

你已经在<body>元素上设置了一个背景图像，这意味着整个页面。如果你想在图像之后显示内容，请将背景图像应用于像<main>这样的元素。

main {
  background-color: #15141A;
  background-image: url("https://sputnick.fr/header.jpg");
  color: white;
  font-family: "Arial";
  font-size: 16px;
  background-size: cover;
  height: 200px;
}

<header></header>
<main>
  <h1>foobar</h1>
</main>
<aside>
  <p>lorem ipsum doloris</p>
  <p>lorem ipsum doloris</p>
  <p>lorem ipsum doloris</p>
  <p>lorem ipsum doloris</p>
</aside>
英文:

You have set a background image on the &lt;body&gt; element which means the whole page. If you want to have content appear after an image, apply the background image to an element like &lt;main&gt; instead.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

main {
  background-color: #15141A;
  background-image: url(&quot;https://sputnick.fr/header.jpg&quot;);
  color: white;
  font-family: &quot;Arial&quot;;
  font-size: 16px;
  background-size: cover;
  height: 200px;
}

<!-- language: lang-html -->

&lt;header&gt;&lt;/header&gt;
&lt;main&gt;
&lt;h1&gt;foobar&lt;/h1&gt;
&lt;/main&gt;
&lt;aside&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;/aside&gt;

<!-- end snippet -->

答案4

得分: 1

我想你只希望在h1标题的背景中应用该背景图像，那么只需将它分配给h1。添加padding以增加高度，并将margin-top设置为0以使其从顶部开始。

body {
  background-color: #15141A;
  color: white;
  font-family: "Arial";
  font-size: 16px;
}
h1 {
  background-image: url("https://sputnick.fr/header.jpg");
  margin: 0;
  padding: 1em 0;
}

<h1>foobar</h1>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
英文:

I suppose you want that background-image only behind the h1 header? Well, then assign it only to the h1. Add padding to make it higher and set margin-top to 0 to make it start right at the top.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  background-color: #15141A;
  color: white;
  font-family: &quot;Arial&quot;;
  font-size: 16px;
}
h1 {
  background-image: url(&quot;https://sputnick.fr/header.jpg&quot;);
  margin: 0;
  padding: 1em 0;
}

<!-- language: lang-html -->

&lt;h1&gt;foobar&lt;/h1&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;
&lt;p&gt;lorem ipsum doloris&lt;/p&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月4日 09:02:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/75633037.html
  • background-image
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定