封面使用背景圖像與固定邊框

我有一個小項目的機構，但它帶給我那麼多麻煩......封面使用背景圖像與固定邊框

如何使圖像與白色邊框覆蓋視口，這裏的邊界一直都是平等的嗎？

這是我想用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給解決方案的實例 - 在這裏你可以比這裏更快地給它... –

封面使用背景圖像與固定邊框

回答

相關問題