我想在图片中制作文字。我已尝试遵守 w3school 中的规则却没有表现出令人满意的效果
下面的代码是创建的 LESS 代码:
body {
background: url("../img/background-blur-5px.jpg") no-repeat top right fixed;
.container{
position: relative;
.img-bg {
margin: auto auto;
display: block;
width: 70%;
position: relative;
@media screen and (max-width: 768px){
display: none;
}
}
.login-box{
position: absolute;
text-align: center;
@media screen and (max-width: 768px){
background: white;
width: 90%;
height: 30em;
margin: 2em 0;
padding: 1em;
}
}
}
}
这是创建的 HTML 代码:
<div class="container">
<img src="{{url('image/sbopays')}}/login-box.png" class="img-bg">
<div class="login-box">
Hello World
</div>
</div>
我忘记了什么以便稍后添加?
最佳答案
CSS 定位将是满足您期望的正确解决方案。 根据位置规则,父容器应具有 position: relative,子标签应具有 position:absolute。
现在您已经应用了相对于图像标签而不是 div 标签。 请检查此链接以了解 CSS 定位方法。 Link
.container{position:relative;}
如果您有任何疑问,请告诉我。
关于html - 在图像中创建文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53808997/