Question

我正在尝试用图像制作一个完整的宽度和高度响应主页。我遇到的问题是填充问题。当我在'background-image：url（）;'下的css中显示图像时，我无法使用填充。唯一有效的是margin属性，但它不响应高度，只显示顶部和其余部分，因为我向下滚动，但我试图让填充响应调整页面高度的大小。为了向大家展示我想要实现的目标，我包括了2个例子，顶部有我想要的，第二个有我面临的问题。当我将img标记放在我的HTML中时，我设法让响应式填充工作，但我不能使用background-image属性，因为我正在尝试将文本放在其上。

    .test img{
    width: 100%;
    max-width: 100%;
    height: 100vh;
    padding: 10px;
    }

    .wrapper {
    background-image: url(https://images4.alphacoders.com/432/43258.jpg);
    height: 100vh;
    width: 100%;
    max-width: 100%;
    background-size: cover;
    background-position: center center;
    }

<div class="test">
<img src="https://images4.alphacoders.com/432/43258.jpg" alt="">
</div>

<div class="main">
<div class="wrapper"></div>
</div>

https://jsfiddle.net/u9t4hqqq/

Answer 1

填充确实有效，但你无法看到它。如果您将内容放在div中，您将看到任何填充的效果。您想要的是将填充应用于父级，在本例中为.main。根据定义填充不会影响它应用的元素的背景，而是影响孩子与元素边界相关的位置。

如果这在某种程度上是不够的，您可以使用box-sizing: border-box模拟外观并使用与身体背景相匹配的10px border。

这提出了一个观点，即您可能希望查看框模型以更好地了解边距和填充以及它们与元素的关系：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Answer 2

madrougebeauty.com使用了一个放在所有元素之上的“框架”;它与填充无关。

要实现类似的目标，请查看以下内容：

.wrapper {
    background-image: url(https://images4.alphacoders.com/432/43258.jpg);
    background-size: cover;
    background-position: center center;
    height: auto;
    min-height: 100vh;
    color: #fff;
    box-sizing: border-box;
    /* Give your content padding so nothing gets hidden under the frame */
    padding: 2em;
    }
.frame {
  position: fixed;
  z-index: 9999;
  background-color: yellow;
}
.top, .bottom {
  width: 100%;
  height: 10px;
  left: 0;
}
.left, .right {
  width: 10px;
  height: 100vh;
  top: 0;
}
.top {
  top: 0;
}
.right {
  right: 0;
  left: auto;
}
.bottom {
  bottom: 0;
  top: auto;
}
.left {
  left: 0;
}

<!-- These 4 elements build a frame on top of the screen -->
<div class="frame top"></div>
<div class="frame right"></div>
<div class="frame bottom"></div>
<div class="frame left"></div>

<div class="wrapper">
  <h1>Headline</h1>
  <p>Your content here.</p>
</div>

Answer 3

你可以使用margin，你只需考虑将你的100vh高度超过100vh的垂直边距，你就可以用calc()来做到这一点

body {margin:0;}
div {
  margin: 10px;
  background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
  height: calc(100vh - 20px);
}

<div></div>

或者您可以将元素包装在另一个元素中，将填充应用于外部元素，并使用border-box将填充保持在100vh内。

body {margin:0;}
section {
  height: 100vh;
  box-sizing: border-box;
  padding: 10px;
}
div {
  background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover;
  height: 100%;
}

<section><div></div></section>

响应填充与背景图像

3 个答案: