Question

我的图片显示有问题。以下是我的代码：

＆＃13;

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

＆＃13;

<body>
  <div class="night-sky">
    <p>qerqwer</p>
    <p>hahahh</p>
  </div>
</body>

＆＃13;

这就是现在的样子：

如果我没有在class div class = "night-sky"之间添加段落，那么它什么都没有显示。但如果我只是在身体中添加background-image，它将正确显示。我不知道出了什么问题。

感谢。

Answer 1

将height: 100%添加到html，这样可以解决问题。

一些建议：

您可以看到，现在顶部会有一些余量 - 这是由于保证金崩溃（您可以在this SO thread中详细了解它）。要删除此项，请在border

night-sky

用以下内容完成：
```
* {
  box-sizing: border-box;
}
```
以便身体上没有滚动条 - 请参阅this SO thread

border-box

干杯！

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

Answer 2

public class CounterService extends Service {
private Handler handler;
private long initialTime;
private long timeInMilliseconds = 0L;
private boolean isActive;
Intent timeBroadcaster = new Intent("EXAMPLE_BROADCAST");

@Override
public void onCreate(){
    super.onCreate();

    Runnable counter = new Runnable() {
        @Override
        public void run() {
            isActive = ((PowerManager) getSystemService(Context.POWER_SERVICE)).isInteractive();
            if(isActive) {
                timeInMilliseconds += 1000;
                handler.postDelayed(this, 1000);
            }
            else {
                if(timeInMilliseconds > 5000) {
                    timeInMilliseconds = 0;
                }
                handler.postDelayed(this, 1000);
            }
            timeBroadcaster.putExtra("counter", timeInMilliseconds);
            sendBroadcast(timeBroadcaster);
        }
    };
}


@Override
public IBinder onBind(Intent intent) {
    return null;
}

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

Answer 3

试试这个： -

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

html背景图片无法正常显示

3 个答案: