我检查了相关帖子的答案,但他们没有帮助。我希望文本以响应式背景图像为中心 - 尽可能使用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/
这是我的第一个问题,如果我没有把它发布得恰到好处,那么道歉。欢迎提出改进建议!
答案 0 :(得分:0)
我假设您希望文本在图像顶部叠加,水平和垂直居中。
这是一种快速的方法,无需更改大量代码。
更改的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>