logo标签列表

背景图片-如何在容器内创建全宽度的图片

csshtmlbackground-imagecontainers
3
我需要在页面模板中嵌入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;

如何将背景图片扩展到整个页面而不是容器，并显示在其他内容的后面？

非常感谢您的提前帮助!!!

问题在于模板CSS中的父级是.wrapper，我无法真正编辑它。有没有一种方法可以“打破”父级的规则？ - user3375160
基本上是这样的。我可以给第三方一个样式表来附加，但他们不太愿意让我接触他们现有的CSS。基本上，我在他们的模板中有一个区域可以添加我的内容，但是我要说的是，我拥有的区域被包装在一个带有类“wrapper”的Div中，该Div的左右边距为17.5％，但我的背景必须是全屏的！（我希望这有意义！） - user3375160
将 .wrapper 改为全宽 + 高，然后添加一个新的 DIV 来替换原来带有 17.5% 边距的 .wrapper DIV。.wrapper DIV 可能需要绝对定位，并具有适当的 z-index。新的 DIV 将相对定位，并具有更高的 z-index。试试看是否可行。 - Billy Moat
@BillyMoat 他无法访问 .wrapper，这就是问题所在。 - TylerH
我无法编辑 .wrapper 的 CSS 或 HTML，但我可以添加自己的样式表，并将 .wrapper 添加到其中以覆盖原始样式，但这会破坏模板页面的其余部分。 - user3375160
显示剩余5条评论
3个回答
6
这完全可以使用与此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;
}


* {
  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;
}
<div class="container">
  <section></section>
  <section class="extra"></section>
  <section></section>
</div>

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;
}
我需要在不同的页面上使用不同的背景，所以我不能把图像路径放在CSS中。此外，我几乎只能在我可以访问的Div容器之间输入HTML，并提供一个样式表给第三方附加，因此我不能真正编辑主CSS文件。 - user3375160
如果您没有访问主CSS文件的权限，并且需要将其作为背景图像，则我认为您没有办法。但是，您可以将您的div容器视为站点的<body>，并将所有内容放在div容器内的另一个div中（除了背景图像）。您可以使用填充或负边距。使用overflow: visible;，您的图像将大于div，但它是否能作为整个<body>的背景图像工作是另一个问题。如果没有访问整个HTML/CSS，很难知道。 - TylerH
实际上，我所说的边距是指左右填充为17.5％。对于任何混淆之处，我感到抱歉，我的大脑已经崩溃了！ - user3375160
1
如果父元素使用 padding 而不是 margin，请尝试将您的 div 设置为 position: absolute;。这样可以忽略父容器的 padding。 - TylerH
1
@TylerH 我认为这最后的评论是解决方案。同时使用 z-index: -1。 - slynagh
2

不知道您是否有这种权限，但是您可以将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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接