我检查了相关帖子的答案,但没有帮助。我想让文本在响应式背景图片的顶部居中 - 仅在可能的情况下使用 CSS。
/*beginning of styling for background img per smashing mag article*/
.hero {
position: relative;
}
.hero #page1img {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.hero #page1img .inner {
padding-top: 64.700855%; /* 757px h divided by 1170w width/height of image */
display: block;
height: 0;
}
/*end of styling for background img per smashing mag article*/
h3 .intro-lead-in {
padding-top: 100px;
text-align: center;
font-family: 'Josefin Slab', serif;
font-style: italic;
font-size: 22px;
}
h1 .intro-heading {
display: inline-block;
text-align: center;
font-family: 'Spinnaker', sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 50px;
}
/* beginning of media queries for background image per smashing mag article*/
/* default screen, non-retina */
.hero #page1img { background-image: url("https://s9.postimg.org/6c1bhr9u7/header-970px-wide.jpg"); }
@media only screen and (min-width: 321px) and (max-width: 538px) {
/* Medium screen, non-retina */
.hero #page1img { background-image: url("../img/header-538px-wide.jpg"); }
}
@media only screen and (max-width: 320px) {
/* Small screen, non-retina */
.hero #page1img { background-image: url("../img/header-290px-wide.jpg"); }
}
/* end of media queries for background image per smashing mag article*/
<div class= "row">
<div class= "col-12">
<div class="hero">
<h3 class="intro-lead-in">Welcome to our Club!</h3>
<h1 class="intro-heading">It's Nice to Meet You</h1>
<span id="page1img" aria-label="MacGregor boats">
<span class="inner"></span>
方法取自 Stephen Thomas 在 Smashing Magazine 上的文章。 此处实现/工作的文章演示:http://sathomas.me/continental/
这是我的第一个问题,如果我没有把它发布得非常正确,我深表歉意。欢迎提出改进建议!
最佳答案
我假设您希望文本层叠在图像之上,水平和垂直居中。
这是一种无需更改大量代码的快速方法。
更改的 CSS 在 text
类(我制作的 div 的类)中。我基本上只是绝对定位它,然后是英雄 div 顶部的 40%。颜色变化只是为了让示例图片上的文字更清晰。
我将文本包裹在一个 div 中,以便于定位。
/*beginning of styling for background img per smashing mag article*/
.hero {
position: relative;
}
.hero #page1img {
width: 100%;
display: inline-block;
vertical-align: middle;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.hero #page1img .inner {
padding-top: 64.700855%;
/* 757px h divided by 1170w width/height of image */
display: block;
height: 0;
}
/*end of styling for background img per smashing mag article*/
h3 .intro-lead-in {
padding-top: 100px;
text-align: center;
font-family: 'Josefin Slab', serif;
font-style: italic;
font-size: 22px;
}
h1 .intro-heading {
display: inline-block;
text-align: center;
font-family: 'Spinnaker', sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 50px;
}
.text {
position:absolute;
text-align:center;
width:100%;
top:40%;
color:#fff;
}
/* beginning of media queries for background image per smashing mag article*/
/* default screen, non-retina */
.hero #page1img {
background-image: url("https://s9.postimg.org/6c1bhr9u7/header-970px-wide.jpg");
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
/* Medium screen, non-retina */
.hero #page1img {
background-image: url("../img/header-538px-wide.jpg");
}
}
@media only screen and (max-width: 320px) {
/* Small screen, non-retina */
.hero #page1img {
background-image: url("../img/header-290px-wide.jpg");
}
}
/* end of media queries for background image per smashing mag article*/
<div class="row">
<div class="col-12">
<div class="hero">
<div class="text">
<h3 class="intro-lead-in">Welcome to our Club!</h3>
<h1 class="intro-heading">It's Nice to Meet You</h1>
</div>
<span id="page1img" aria-label="MacGregor boats">
<span class="inner">
</span>
</span>
</div>
</div>
</div>
关于html - 文本不以响应式背景图像为中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45068362/