Я хочу превратить текст в изображение. Я пытался следовать правилам w3school, но это не дало удовлетворительных результатов
Следующий код ниже - это созданный МЕНЬШЕ кода:
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>
Что я забыл, чтобы добавить позже?
Положение контейнера должно быть относительным, если содержимое внутри является абсолютным:
.container {
position: relative;
}
Я попытался опубликовать его в jsfiddle, но не могу загрузить изображения
Позиционирование CSS будет правильным решением для ваших ожиданий. Согласно правилу положения, родительский контейнер должен иметь позиция: относительная, а дочерний тег должен иметь позиция: абсолютная.
Теперь вы применили относительно тега изображения вместо тега div. пожалуйста, проверьте эту ссылку, чтобы узнать о методе позиционирования CSS. Ссылка на сайт
.container{position:relative;}
если у вас есть сомнения, дайте мне знать.
Я уже использую позиционирование CSS, и он, наконец, сработал с дальнейшим объяснением моего ответа
Я получил окончательный ответ.
Мой код был правильным, но, сделав еще один шаг, мне просто нужно больше позиционирования в стиле left
right
top
и bottom
:
.login-box{
position: absolute;
top: 3em;
left: 54%;
right: 20%;
text-align: left;
@media screen and (max-width: 768px){
background: white;
position: relative;
top: 0;
left: 0;
width: 90%;
height: 30em;
margin: 2em 0;
padding: 1em;
}
}
@MirukuSheki разместите ссылку jsfiddle, чтобы помочь вам лучше