Question

我想让我的背景图片跨越整个页面。这可以正常工作，除了它可以添加到页面上的任何其他控件/元素之外。为了让我能够将图像作为跨越整个页面的背景以及在其上添加文本/图像，我可以改变什么？这是我目前的语法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  html {height:100%;}
  body {height:100%; margin:0; padding:0;}
  #bg {position:fixed; top:0; left:0; width:100%; height:100%;}
  #content {position:relative; z-index:1;}
</style>
<center>
  <div>
    <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
  </div>
</center>
</head>

<body>
<div id="bg"><img src="C:\KittyKat.jpg" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>    
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

Answer 1

我使用演示图像进行测试。这是工作代码：只需将z-index: -1;添加到#bg。

＆＃13;

  html {height:100%;}
  body {height:100%; margin:0; padding:0;}
  #bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;}
  #content {position:relative; z-index:10;}

＆＃13;

<center>
  <div>
    <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
  </div>
</center>

<body>
<div id="bg">
<img src="https://www2.palomar.edu/pages/testwritingstrategies/files/2015/02/online-test-fotolia_60995176.jpg" width="100%" height="100%" alt="1stDay" />
</div>
<font size="30" color="red">Pic 1</font><br>    
<img src="http://authentic-scandinavia.com/system/images/tours/photos/155/thumbnail.jpg?1370424008" alt="" style="width:450px;height:500px;">

＆＃13;

Answer 2

我会使用z-index。它允许您更改元素的顺序。因此z-index: 1;元素会出现在z-index: 0;

元素的前面

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  html {height:100%;}
  body {height:100%; margin:0; padding:0;}
  #bg {position:fixed; top:0; left:0; width:100%; height:100%;}
  #backgroundImage{z-index: -1;}
  #content {position:relative; z-index:1;}
</style>
<center>
  <div>
    <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
  </div>
</center>
</head>

<body>
<div id="bg"><img src="C:\KittyKat.jpg" id="backgroundImage" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>    
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

＆＃13;

Answer 3

您是否尝试设置div的background-image属性，而不是将图像作为元素？这应该提供你正在寻找的效果。将以下规则添加到CSS文件中。

#bg {
    background-image: url("C:\KittyKat.jpg");
    width:100vw;
    height:100vh;
}

Answer 4

使用css

将图像作为div的背景

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  html {height:100%;}
  body {height:100%; margin:0; padding:0;}
  #bg {
    position:fixed;
    width:100vw;
    height:100vh;
    background: url('C:\KittyKat.jpg');
    background-size: cover;
  }
  #content {position:relative; z-index:1;}
</style>
<center>
  <div>
    <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
  </div>
</center>
</head>

<body>
<div id="bg"></div>
<font size="30" color="red">Pic 1</font><br>    
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

＆＃13;

HTML图像位于其他控件之上

4 个答案: