Как разместить изображение заголовка над изображением тела - PullRequest
Новая
       0

Как разместить изображение заголовка над изображением тела

0 голосов
/ 29 июня 2018

Вот как это выглядит в настоящее время:

enter image description here

То, что должно быть заголовком, в настоящее время прозрачно поверх изображения тела. Я пытаюсь заставить его сидеть позади, где наверху написано "НОВОСТИ". Изображение заголовка в настоящее время вставлено с <img src="https://i.imgur.com/wLTnUyF.png">, и я не знаю, что добавить, чтобы изменить его положение.

(Я также могу добавить дополнительные сведения, если этого недостаточно, чтобы получить ответ, который я ищу.)

Редактировать : Вот весь код: PASTEBIN

Ответы [ 3 ]

0 голосов
/ 29 июня 2018 

* {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

.gr1,
.gr2,
.gr3,
.gr-top .tri,
.gr-top .gr h2 img,
.gr-top .gr span {
  display: none;
}

.gr-top .gr {
  padding-left: 0 !important;
}

/* body { background-image: url('https://i.imgur.com/iYr6KIy.png'); background-repeat: no-repeat; background-size: 950px 540px;  } */

h3 {
  font-size: 25px;
  text-align: center;
  color: #c8b46e;
  background-repeat: no-repeat;
  background-size: 400px;
  background-position: center center;
  padding: 20px;
  background-image: url("https://i.imgur.com/RbBgBbv.png");
}

.scrollbox {
  height: 360px;
  width: 420px;
  overflow: auto;
  padding: 20px;
  font-family: Ubuntu;
  font-size: medium;
  color: #aaa89e;
  background: transparent;
}

.scrollbox2 {
  height: 100px;
  width: 360px;
  overflow: auto;
  padding: 20px;
  font-family: Ubuntu;
  font-size: medium;
  color: #aaa89e;
  background: transparent;
}

.gr-body .gr .grf-indent .text {
  max-width: 500px;
}

.gr-body .gr .grf-indent .bottom {
  position: relative;
  bottom: 160px;
  left: 10px;
  color: #fff;
}

.gr-body .gr .grf-indent .bottom a {
  color: #fff;
}
.gr-body .gr .grf-indent .bottom a:hover {
  color: #c8b46e;
}

a:hover {
  cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
body {
  cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}

.container {
  position: relative;
}

.bottomleft {
  position: relative;
  top: 60px;
  left: 10px;
  font-size: 18px;
}

.topright {
  position: relative;
  bottom: 444px;
  left: 510px;
  font-size: 18px;
}

.top {
  position: absolute;
  top: 0px;
  width: 500px;
}

img.back {
  margin-top: 70px;
  width: 940px;
  height: 540px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class='wrap'>
        <h3>NEWS</h3>
        <img class="top" src="https://i.imgur.com/wLTnUyF.png">
        <img class="back" src="https://i.imgur.com/iYr6KIy.png">



    </div>
</body>

</html>
0 голосов
/ 30 июня 2018

В итоге я придумал способ получить желаемые результаты. Я добавил фон специально к .gr-top .gr h2, а затем изменил выравнивание текста.
Теперь моя кожа журнала выглядит так; Обновленный просмотр 

.gr-top .gr h2{
text-align: right;
background-repeat: no-repeat;
background-position: left left;
padding: 33px;
background-size: 600px;
background-image: url("https://i.imgur.com/wLTnUyF.png");
}

Извините за плохую формулировку вопроса. Я постараюсь быть яснее в следующий раз.

0 голосов
/ 29 июня 2018

Я не уверен, что вы пытаетесь сделать. Но если вы пытаетесь добавить изображение в заголовок, вы должны сделать: 

<!DOCTYPE html>
<html>
<header>

<img src="https://i.imgur.com/wLTnUyF.png">

</header>
<body>

<img src="bodyimage.png">

</body>
</html>

Если это не сработает, не забудьте загрузить изображение и загрузить его в рабочее пространство.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...