Question

我需要将HTML内容放在页面模板中。我给出的部分是在一个Div容器中，它定义了我必须使用的大小。模板的CSS定义了左右17.5％的边距，这意味着我在中心有65％输入我的内容。这对于我需要包含的大部分内容都是可以的，除了需要全宽（100％）的背景图像。我可以附加一个带有我的内容的样式表，但是如果我更改了我的CSS中的.wrapper元素，则会导致页面其余部分出现问题。我还必须逐页更改背景图像，因此必须在HTML中包含图像路径，而不是在CSS中。

到目前为止我所拥有的是

HTML：

 <div class="pageBackground">
        <img src="img/festival-background.jpg">
    </div>

CSS：

.pageBackground {
position: relative;

}

.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

}

将背景图片100％设置为页面而不是容器并将其他内容放在后面的正确方法是什么？

非常感谢提前!!!

Answer 1

这完全可以使用与此Q/A中详述的相同技术。

基本上，不使用额外的HTML，我们使用绝对定位的伪元素作为所需部分/ div的背景。

.extra {
    position: relative;    
}

.extra::after {
    content: '';
    position: absolute;
    top:0;
    width: 100vw;
    height: 100%;
    left:50%;
    transform:translateX(-50%);
    background-image: url(http://lorempixel.com/output/abstract-q-c-1000-250-5.jpg);
    background-size: cover ;
    background-repeat: no-repeat;
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 65%;
  margin: auto;
  border: 1px solid green;
}
section {
  min-height: 100px;
  border: 1px solid lightgrey;
}
.extra {
  position: relative;
}
.extra::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

＆＃13;

<div class="container">
  <section></section>
  <section class="extra"></section>
  <section></section>
</div>

＆＃13;

Answer 2

在CSS中，将背景图像添加到body属性中，然后将网站的其余部分放在整个容器div中，其中所有其他属性都将驻留在其中。

HTML：

 <body>
   <div class="entireSite">
     Site content goes here.
   </div>
 </body>

CSS：

.body {
   background-image:url("img/festival-background.jpg");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size:cover;
}

.entireSite {
   position: absolute;
   z-index: -1;
}

Answer 3

不知道你是否拥有这种权限，但是你可以将img放在那个div之外，并将它们设置在绝对位置。

<img src="asdf>
<div class="wrapper">

CSS：

.wrapper {
position: absolute;
text-align: center;
width: 65%;
background-color: transparent;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -32.5%;
}

img {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
background-color: gray;

}

jsFiddle

背景图像 - 在容器内制作全宽图像

3 个答案: