如何在背景图像结束后放置我的<p>文本</p>，保持领先<h1>原样？

问题描述 投票：0回答：4

网址是https://sputnick.fr/

HTML 是：

body {
  background-color: #15141A;
  background-image: url("https://sputnick.fr/header.jpg");
  color: white;
  font-family: "Arial";
  font-size: 16px;
}
<h1>foobar</h1>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>

我搜索了 MDN 和其他资源，但我不知道该怎么做。

我想要所有

<p>xxxx</p>
在背景图片之后。

可能吗？

html css background-image
4个回答
1
投票

不清楚你是否想要重复的背景图片，但是说“我想要 Y 之后的 X”的万无一失的方法是让它们在 DOM 顺序中成为不同的、连续的元素。有点像

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

h1{
  color: white;
}
<header>
  <h1>
    Site Title
  </h1>
</header>
<main>
  <p>
    Some content
  </p>
  <p>
    Some more content
  </p>
</main>

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

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

.content{
  margin-top: 650px;
}
<div class="wrapper">
  <h1>
    Site Title
  </h1>
  <div class="content">
    <p>
    Some text
    </p>
  </div>
</div>

这确实依赖于与背景图像的高度相匹配的硬编码边距顶部——如果此高度发生变化，则此代码将中断。如果这是一种可能的情况，那么您也可以考虑将两种方法结合起来

body{
  background-image: url("https://sputnick.fr/header.jpg");
  color: white;
}
h1{
  position: absolute;
  top: 0;
}
<body>
  <header>
  
    <img src="https://sputnick.fr/header.jpg">
    <h1>
      Site Title
    </h1>
</header>
  <main>
      <p>
      Some content
    </p>
    <p>
      Some more content
    </p>
  </main>
</body>

这有依赖 

position: absolute
的缺点，但如果您更改背景图像的尺寸，效果会更好。

希望这能给你一些工作的想法！

1
投票

你可以通过在 h1 标签的底部添加 padding 或 margin 来做到这一点。

检查这个代码笔：codepen.io/gd17/pen/LYJyoeM

.heading { margin-bottom: 18%; }

我向 h1 添加了一个自定义类“标题”，并添加了基于 % 的 CSS 填充。

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>

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.