Question

这是我的代码和链接：

（顺便说一下，我尝试过添加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>

我试图弄清楚如何在页面上向下移动图像，但是当我只是试图向下移动图像时，我一直在移动背景图像。不幸的是，我似乎无法在任何地方找到图像代码在页面下方的代码。

Answer 1

我将图片向下移动到html

中

node.SetValue("ItemIdentifier", newIdentifier);

Answer 2

您能否再详细说明一下您的问题。将图像向下移动是什么意思？您可以在html中移动图像，或使用填充将空间设置为顶部或底部更多。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

我未能确切地看到你想要在这里实现的目标。您可能值得一看CSS Box模型，以了解元素如何使用边距和填充在页面上定位。

这是一个链接。 https://www.w3schools.com/css/css_boxmodel.asp

对于你的问题的解决方案，我现在真的只能推测。根据您在评论中所说的内容，您会感觉图像太靠近顶部＆amp;与文本不够接近。

要将顶部图像从屏幕顶部移开，您需要为其提供任意数量的保证金。

img {
  margin-top: 50px;
}

使图像更接近文本。您有2个选项，要么为图像提供负边距，要么更改文本的边距。像这样：

此

img {
   margin-bottom: -10px;
}

或者这个

p {
  margin-top: 10px;
}

最终结果将是这样的，使用后者的选项。

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 4

尝试使用“ pseudoBackground ”，设置<div>并为div提供背景，然后设置z-index: -5;。通过这种方式，您可以更多地操纵您的BG（或div）。

尝试在页面

4 个答案: