我正在尝试使它在调整窗口大小时随文本一起移动。我不知道为什么它即使与其他ID的/类具有相同的属性也不起作用。
Check here for JSFiddle
.relative{
position:relative;
width:100%;
}
.absolute-text {
color: white;
position:absolute;
bottom:0;
top: 115px;
width:100%;
text-align:center;
font-family: 'Raleway', sans-serif;
}
#fontStyle {
font-weight: 700;
font-size: 48px;
}
#fontStyle2 {
font-size: 25px;
text-decoration: none;
font-weight: 500;
top: 210px;
}
#button {
width: 200px;
height: 46px;
line-height: 46px;
padding: 0px 24px;
display: inline-block;
background-color: #1a75ff;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: uppercase;
-webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
top: 335px;
left: 825px;
text-align: center;
}
<header>
<div class="relative">
<img id="headerimage" src="http://i.imgur.com/iiE3pbP.jpg" />
<p class="absolute-text" id="fontStyle">Reliable Web Hosting</p>
<p class="absolute-text" id="fontStyle2" href="contact.html">We offer quality and reliable web hosting at <br> low prices that you'll not want to miss.</p>
<a class="absolute-text" id="button" href="">Order Web Hosting</a>
</div>
</header>
最佳答案
您可以使用%进行响应
<div class="relative">
<img id="headerimage" src="http://i.imgur.com/iiE3pbP.jpg" width="100%" />
<p class="absolute-text" id="fontStyle">Reliable Web Hosting</p>
<p class="absolute-text" id="fontStyle2" href="contact.html">We offer quality and reliable web hosting at <br> low prices that you'll not want to miss.</p>
<p class="button_center"><a class="absolute-text" id="button" href="">Order Web Hosting</a></p>
</div>
<style>
.relative{
position:relative;
width:100%;
}
.absolute-text {
color: white;
position:absolute;
bottom:0;
top: 4%;
width:100%;
text-align:center;
font-family: 'Raleway', sans-serif;
}
#fontStyle {
font-weight: 700;
font-size: 48px;
}
#fontStyle2 {
font-size: 25px;
text-decoration: none;
font-weight: 500;
top: 30%;
}
.button_center{
text-align:center;
}
#button {
width: 200px;
margin-left: -130px;
height: 46px;
line-height: 46px;
padding: 0px 24px;
display: inline-block;
background-color: #1a75ff;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: uppercase;
-webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
top: 60%;
text-align: center;
}
</style>
最佳变体-您可以将图片放在
<div style="background:url() >
中,而不要使用“绝对”===================尝试
<p class="button_center"><a class="absolute-text" id="button" href="">Order Web Hosting</a></p>
.button_center{
text-align:center;
position: absolute;
left: 50%;
top: 60%;
}
#button {
width: 200px;
height: 46px;
line-height: 46px;
padding: 0px 24px;
display: inline-block;
background-color: #1a75ff;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: uppercase;
-webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
left:40%;
text-align: center;
position: relative;
left: -50%;
}