Попытка переместить изображение ниже по странице
Вот мой код и ссылка:
(кстати, я пробовал все, например, добавление img и добавление position: 100%;, но ничего не работает)
http://dash.ga.co/mcampb/build-your-own-personal-website
body {
text-align: center;
background: url("https://i.imgur.com/YGc2Dtx.gif");
background-size: cover;
background-position: center;
color: white;
font-family: chiller;
}
p {
font-size: 52px;
}
input {
border: 15;
padding: 10px;
font-size: 18px;
}
input[type = "submit"] {
background: green;
color: white;
}<body>
<img src = "https://i.imgur.com/wDVrcNim.jpg">
<p> I'm Mugdea, a NYC horror writer. Say boo!</p>
<input type = "email" placeholder = "Your email">
<input type = "submit"> enter code here
</body>Я попытался выяснить, как переместить изображение вниз по странице, но я продолжаю перемещать фоновое изображение, когда я только пытаюсь переместить изображение вниз. К сожалению, я не могу найти код нигде, где код изображения находится ниже на странице.
@yorick Я изменил основную на 50%:
Привет, @yorick, посмотри: .main {height: 50%; ширина: 100%; дисплей: таблица;
@yorick вот новая ссылка dash.ga.co/mcampb/build-your-own-personal-website
Ответы 3
Я переместил изображение вниз, поместив его ниже в html
<!DOCTYPE html>
<head>
<title>Mugdea</title>
<style>
body {
text-align: center;
background: url("https://i.imgur.com/YGc2Dtx.gif");
background-size: cover;
background-position: center;
color:white;
font-family: chiller;
}
p {
font-size: 52px;
}
input {
border: 15;
padding: 10px;
font-size: 18px;
}
input[type = "submit"] {
background: green;
color: white;
}
</style>
</head>
<body>
<p> I'm Mugdea, a NYC horror writer. Say boo!</p>
<input type = "email" placeholder = "Your email">
<input type = "submit">
<img src = "https://i.imgur.com/wDVrcNim.jpg">
enter code here</body>Не могли бы вы подробнее сформулировать свой вопрос. Что вы имеете в виду под перемещением изображения вниз. Вы можете переместить изображение в html или использовать отступы, чтобы немного увеличить пространство вверху или внизу.
html, body {
height: 100%;
}
body {
text-align: center;
background: url("https://i.imgur.com/YGc2Dtx.gif");
background-size: cover;
background-position: center;
color: white;
font-family: chiller;
}
p {
font-size: 52px;
}
input {
border: 15;
padding: 10px;
font-size: 18px;
}
input[type = "submit"] {
background: green;
color: white;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}<body>
<div class = "main">
<div class = "wrapper">
<img src = "https://i.imgur.com/wDVrcNim.jpg">
<p> I'm Mugdea, a NYC horror writer. Say boo!</p>
<input type = "email" placeholder = "Your email">
<input type = "submit"> enter code here
</div>
</div>
</body>посмотрите на верхнее изображение в моем коде. Он расположен слишком высоко на странице. Я не знаю, какой код использовать, чтобы расположить его ближе к тексту.
ты получил мой ответ?
Привет, @yorick, спасибо. Это слишком далеко вниз. Я использую ваш код, но регулирую высоту, чтобы не так далеко
Я не могу понять, чего именно вы здесь пытаетесь достичь. Возможно, вам стоит взглянуть на модель CSS Box Model, чтобы понять, как элементы могут быть расположены на странице с использованием полей и отступов.
Вот ссылка. https://www.w3schools.com/css/css_boxmodel.asp
Что касается решение на ваш вопрос, я могу только предполагать на данный момент. Основываясь на том, что вы сказали в комментариях, вы чувствуете, что изображение слишком близко к верху и недостаточно близко к тексту.
Чтобы отодвинуть верхнее изображение от верхнего края экрана, вам нужно будет дать ему верхнее поле любого размера, который вам нравится.
img {
margin-top: 50px;
}
Для приближения изображения к тексту. У вас есть 2 варианта: либо дать изображению отрицательное поле внизу, либо изменить поле вверху текста. Вот так:
Этот
img {
margin-bottom: -10px;
}
Или это
p {
margin-top: 10px;
}
Конечный результат будет примерно таким, если использовать последний из вариантов.
body {
text-align: center;
background: url("https://i.imgur.com/YGc2Dtx.gif");
background-size: cover;
background-position: center;
color: white;
font-family: chiller;
}
p {
font-size: 52px;
margin-top: 0px; // Increase to move the image away from the top of the text
}
input {
border: 15;
padding: 10px;
font-size: 18px;
}
input[type = "submit"] {
background: green;
color: white;
}
img {
margin-top: 50px; // Increase to move the image away from the top
}<body>
<img src = "https://i.imgur.com/wDVrcNim.jpg">
<p> I'm Mugdea, a NYC horror writer. Say boo!</p>
<input type = "email" placeholder = "Your email">
<input type = "submit"> enter code here
</body>
@stefanbob Я попытался добавить div или переместить изображение вниз, и все, что он сделал, это отбросил абзац