英文:
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("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 ressources, but I don't get how to do this.
I want all <p>xxxx</p>
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("https://sputnick.fr/header.jpg");
height: 200px;
width: 100%;
}
h1{
color: white;
}
<!-- language: lang-html -->
<header>
<h1>
Site Title
</h1>
</header>
<main>
<p>
Some content
</p>
<p>
Some more content
</p>
</main>
<!-- 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("https://sputnick.fr/header.jpg");
height: 800px;
width: 100%;
color: white;
}
.content{
margin-top: 650px;
}
<!-- language: lang-html -->
<div class="wrapper">
<h1>
Site Title
</h1>
<div class="content">
<p>
Some text
</p>
</div>
</div>
<!-- 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("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>
Site Title
</h1>
</header>
<main>
<p>
Some content
</p>
<p>
Some more content
</p>
</main>
</body>
<!-- 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 <body>
element which means the whole page. If you want to have content appear after an image, apply the background image to an element like <main>
instead.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<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>
<!-- 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: "Arial";
font-size: 16px;
}
h1 {
background-image: url("https://sputnick.fr/header.jpg");
margin: 0;
padding: 1em 0;
}
<!-- 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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论