使用具有固定边框的背景图片覆盖 body

Question

我有一个小项目，但它给我带来了很多麻烦...

如何让图片和白色边框覆盖视口，边框始终相等？

这是我想要的布局的屏幕转储，是用 Photoshop 创建的。

CSS 目前为止我试过了。

body {
    background-repeat: no-repeat;
    background-position: center center fixed;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url(../img/bg_border.jpg);
}

如果您有任何线索，我们将不胜感激！谢谢！

Answer 1

您好，您需要将您的内容包装到 .wrapper 和 cover 上的背景图片中。

你的身高：http://codepen.io/SzymonDziewonski/pen/RWZzGq

并且具有流畅的全屏高度：http://codepen.io/SzymonDziewonski/pen/jbLjVb

有很多方法可以做到这一点 - 这只是其中的两种

编辑我的错误 - 社区是对的

因此，作为赎回，我在代码段中提供代码。我们每天都在学习，我也是。

第一个解决方案： 包装容器的高度

body{
  padding: 40px;
}
.wrapper{
  background-color: red;
  width: 100%;
  height: 400px;
  position: relative;
  background-image: url("http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
}

<div class="wrapper"></div>

方案二：包装容器的流体高度

*{
  padding: 0;
  margin: 0;
}
body{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper{
  background-color: red;
  position: absolute;
  top: 40px;
  left:40px;
  bottom: 40px;
  right: 40px;
  background-image: url("http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
}

<div class="wrapper"></div>

Answer 2

是这样的吗？

html, body {
  margin: 0; padding: 0; height: 100%;
}
.wrapper {
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center center fixed;
    background-attachment: fixed;
    background-size: cover;
    background-image: url(http://lorempixel.com/output/nature-q-c-1000-600-1.jpg);
    border: 50px solid white;
    height: 100%;
}

<div class="wrapper"></div>

使用具有固定边框的背景图片覆盖 body

Cover the body using a background image with a fixed border

html

css

background

margin