封面使用背景图像与固定边框

我有一个小项目的机构，但它带给我那么多麻烦......封面使用背景图像与固定边框

如何使图像与白色边框覆盖视口，这里的边界一直都是平等的吗？

这是我想用Photoshop创建的布局的一个screendump。

我试过至今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); 
}

如果您有线索，将不胜感激！谢谢！

来源

2015-10-13 Xavier Godbout

你有没有HTML呢？看到这将是一个很好的帮助。 – Jesse

我不确定我是否理解，但可以缩小背景，例如'background-size：calc（100vw - 50px）calc（100vh - 50px）;'其中'50px' 2x是所需的边框厚度：http://jsfiddle.net/4yLwprrx/ – pawel

自适应边框？ vh或vw单位可以是提示，透明边框和背景剪辑。例如：http://codepen.io/gc-nomade/pen/XmaLRg但是你的意思是“适应边界？” –

是这样的吗？

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>

来源

2015-10-13 19:43:14 LGSon

-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>

来源

2015-10-13 19:39:38

@isherwood什么？你不知道codepen？新的在这里？：D –

哈哈，为什么我会倒下来？呃...什么和无知。当你陷入困境时，什么是帮助的重点。社区正在衰落。 –

这么好，你必须知道jsfiddle和codepen给解决方案的实例 - 在这里你可以比这里更快地给它... –

封面使用背景图像与固定边框

回答

相关问题