Question

这是当前的样子：

应该是标题的当前在主体图像上是透明的。我正在尝试使其位于顶部顶部的“新闻”后面。标题图片当前插入了<img src="https://i.imgur.com/wLTnUyF.png">，但我不知道要添加什么来重新定位。

（如果这还不足以得到我要找的答案，我还可以添加其他详细信息。）

编辑：以下是整个代码：PASTEBIN

Answer 1

我不确定您要做什么。但是，如果您要在标题中添加图片，则应该执行以下操作：

<!DOCTYPE html>
<html>
<header>

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

</header>
<body>

<img src="bodyimage.png">

</body>
</html>

如果这不起作用，请记住实际下载图像并将其上传到您的工作区中。

Answer 2

* {
  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>

Answer 3

我最终想出一种方法来获得想要的结果。我要做的是专门为.gr-top .gr h2添加背景，然后更改文本的对齐方式。
现在我的日记皮肤看起来像这样; Updated Preview

.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");
}

很抱歉这个问题的措辞不好。下次我会尽量保持清晰。

如何将标题图像放置在人体图像上方

3 个答案: