Question

我有一个背景，我试图放在我的标题后面，但我遇到了麻烦。

我的所有内容都背后都是。

任何人都能给我一些关于我做错了什么或错过什么的见解吗？

* {
  box-sizing: border-box;
}

.header {
  background-color: white;
  color: #36363F;
  height: 600px;
  padding: 15px;
}

<div class="header">
  <h1>GETUWIRED</h1>
</div>
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg' style='width:100%;height:100%' alt='[]' />
</div>

Answer 1

有几种方法可以做到这一点：

在background（或body）中使用css html - 推荐

＆＃13;

* {
  box-sizing: border-box;
}

body {
  background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
}

.header {
  background-color: white;
  color: #36363F;
  height: 600px;
  padding: 15px;
}

img {
  width: 100%;
  height: 100%
}

＆＃13;

<div class="header">
  <h1>GETUWIRED</h1>
</div>

＆＃13;

z-index否定

在带背景的元素中使用z-index: -1代替z-index:0。

此外，您可以将图像用作背景而不是img元素，以具有语义含义。

＆＃13;

* {
  box-sizing: border-box;
}

.bg {
  background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.header {
  background-color: white;
  color: #36363F;
  height: 600px;
  padding: 15px;
}

img {
  width: 100%;
  height: 100%
}

＆＃13;

<div class="header">
  <h1>GETUWIRED</h1>
</div>
<div class="bg">

</div>

＆＃13;

注意避免使用内联样式，这是一种不好的做法。

Answer 2

由于您在整个视口中拉伸图像，我建议您将其添加为身体上的background-image。它会给你一个更清晰的标记。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    * {
    box-sizing: border-box;
    }
    
    body {
      background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg) center no-repeat;
      background-size: cover;
    }
    
    .header {
        background-color: white;
        color: #36363F;
	    height: 600px;
        padding: 15px;
    }

    </style>
    </head>
    <body>

    <div class="header">
       <h1>GETUWIRED</h1>
    </div>

    </body>
    </html>

Answer 3

你不应该使用img标签作为背景，你应该使用css背景。你可以从这里https://developer.mozilla.org/en/docs/Web/CSS/background

学习css背景

在您的情况下，您应该重写您的代码，如下所示。利用身体css背景。

我将标题高度调整为110px，因为之前太高了。

＆＃13;

 <!DOCTYPE html>
 <html>
 <head>
    <style>
        * {
            box-sizing: border-box;
        }
        .header {
            background-color: white;
            color: #36363F;
            height: 110px;
            padding: 15px;
        }
        body {
            background-image: url('http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg');
            background-size: 100% 100%;
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>GETUWIRED</h1>
    </div>
</body>
</html>

＆＃13;

Answer 4

@巴巴尔-miamor

请尝试更改类容器属性，如下所示

margin: 0px;
padding: 0px;
height: 100%;

希望有所帮助。

在标题后面放置背景

4 个答案: