logo标签列表

HTML背景图片无法正常显示。

htmlcssbackgroundcss-position
3

我在图片显示方面遇到了一些问题。以下是我的代码：

.night-sky {
  position: relative;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
  height: 100%;
  width: 100%;
  content: ' ';
  position: absolute;
  top: 0;
  /* http://bg.siteorigin.com/ */
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
  opacity: .1;
}
body {
  height: 100%;
  margin: 0;
  background: #000;
}
<body>
  <div class="night-sky">
    <p>qerqwer</p>
    <p>hahahh</p>
  </div>
</body>

这是现在的样子：

enter image description here

如果我在
之间没有添加段落，则什么也不会显示。但是，如果我只是在body中添加background-image，它将正确显示。我不知道问题出在哪里。
谢谢。
很可能是因为你使用了百分比高度，但未定义宽度。因此，除非存在一个元素，否则无法为night-sky设置宽度/高度。因此没有背景可见。请参考一个不包含段落的样本fiddle。https://jsfiddle.net/5a2xowwg/ - aVC
Link:-http://www.html.am/html-codes/image-codes/background-image-code.cfm - Razia sultana
3个回答
3

在 html 中加入 height: 100% 即可解决问题。

一些建议：

  1. You can see that now there would be some margin at the top - this comes due to margin collapsing (you can read more about it in this SO thread). To remove this add a border to the night-sky

  2. Finish it up with:

    * {
  box-sizing: border-box;
}

    so that there is no scrollbar on the body - see why border-box is important in this SO thread

干杯！

* {
  box-sizing: border-box;
}
html{
  height: 100%;
}
.night-sky {
  position: relative;
  height: 100%;
  margin: 0;
  
  border: 1px solid black;
  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
  height: 100%;
  width: 100%;
  content: ' ';
  position: absolute;
  top: 0;
  /* http://bg.siteorigin.com/ */
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
  opacity: .1;
}
body {
  height: 100%;
  margin: 0;
  background: #000;
}
<body>
  <div class="night-sky">
    <p>qerqwer</p>
    <p>hahahh</p>
  </div>
</body>

2

html, body { height: 100%; width: 100%; margin: 0;}

.night-sky {
  position: relative;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
  width: 100%;
  content: ' ';
  position: absolute;
  top: 0;
  /* http://bg.siteorigin.com/ */
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
  opacity: .1;
}
body {
  height: 100%;
  margin: 0;
  background: #000;
}
<body>
  <div class="night-sky">
    <p>qerqwer</p>
    <p>hahahh</p>
  </div>
</body>

0

试试这个：

<div style="background-image:url(http://www.html.am/images/image-codes/milford_sound_t.jpg);width:220px;height:140px;">

</div>

如果你想的话，你可以根据自己的需求更改高度和宽度。 - Razia sultana
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接