[英]Overlay text over centered image?
我想在居中图像上覆盖文字。 下面的方法感觉很hacky,但是当窗口具有固定大小时可以使用:
$Illustrationwidth: 509px;
.Illustration {
position: relative;
text-align: center;
margin-top: 60px;
&_tricky {
position: absolute;
text-align: left;
top: 24px;
left: 290px;
width: 300px;
}
&_answered {
position: absolute;
text-align: left;
top: 73px;
left: 290px;
width: 300px;
}
&_attention {
position: absolute;
text-align: left;
top: -30px;
left: 96px;
}
}
这是我正在使用的HTML:
<div class="IntroIllustration">
<img src="images/illustration.png"/>
<h2 class="Illustration_attention">header above the image</h2>
<div class="Illustration_tricky">an overlayed text</div>
<div class="Illustration_answered">another overlayed text</div>
</div>
但是,如果用户更改窗口的宽度,则无法使用。
即使窗口可以改变宽度,我该如何工作? 该解决方案需要适用于IE 10+和最新的两个版本的Chrome。
另外,请教育我并帮助我在CSS上变得更好:-)
更新:我现在看到您的代码。 我添加了一些背景颜色和字体大小作为附加功能,因此您可以更好地了解其功能。
对字体大小的vw而不是px使用%和,它将全部响应缩小。
#Illustration {
position: relative;
max-width: 509px;
margin: 0 auto;
}
.Illustration_attention {
font-size: 4vw;
font-family: 'Roboto Slab', Rockwell, Serif;
font-weight: bold;
color: #000;
text-align: center;
}
.Illustration_tricky {
position: absolute;
background: green;
text-align: center;
margin-top: 10%;
left: 10%;
font-size: 3vw;
}
.Illustration_answered {
position: absolute;
background: white;
text-align: center;
margin-top: 30%;
left: 20%;
font-size: 2vw;
}
.Illustration img {
display: block;
position: absolute;
width: 100%;
height: auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.