響應CSS圖片幕布效果

我想產生這樣的頁面上的一個響應幕布效果： http://www.buildwindows.com/響應CSS圖片幕布效果

圖像固定在頂部，以便在它的內容滾動用戶滾動時。

這似乎很容易，如果你知道圖像的高度，你可以只使用上邊距上的內容：

HTML：

<header> 
    <img src="http://placehold.it/300x250/0000ff/ffffff" alt="" /> 
</header> 

<article> 
    <img src="http://placehold.it/300x1000/00ff00/ffffff" alt="" /> 
</article>

CSS：

header { 
    position: fixed; 
    top: 0; 
} 

article { 
    position: relative; 
    margin-top: 250px; 
}

但是，如果將圖像設置爲寬度：100％，以便它變成這個高度隨着瀏覽器的寬度而變化，所以margin-top技術不起作用。這個效果可以單獨使用CSS實現，還是需要使用JavaScript調整窗口大小的偵聽器？

來源

2013-05-07 dougmacklin

你可以得到由只設置大圖像的容器上的背景圖片，並給予它這個CSS3屬性/值到一個非常類似的效果（沒有所有的複雜性）：

background-size: cover;

這不是完全一樣，但相當不錯。您可以在容器上設置％高度，但如果您不小心，可能會導致內容溢出。

這裏是我的意思粗略例如：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body {height: 100%; margin:0; padding: 0;} 
div { 
height: 60%; 
background-image: url(http://www.buildwindows.com/img/secret.jpg); 
background-repeat: no-repeat; 
background-size: cover; 
} 
</style> 

</head> 
<body> 

<div></div> 

</body> 
</html>

也有很多JS響應圖庫在那裏以類似的方式表現，雖然我不知道我會去那因爲你只有一個圖像在這裏。

編輯：這裏是另一個實驗：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body {height: 100%; margin:0; padding: 0;} 
.banner { 
min-height: 50%; 
background-image: url(http://www.buildwindows.com/img/secret.jpg); 
background-repeat: no-repeat; 
background-size: cover; 
color: white; 
} 
h1 {margin: 0 0 40px 0; font-size: 3em;} 

.banner div, .content div {width: 60%; margin: 0 auto;} 
</style> 

</head> 
<body> 

<div class="banner"> 
    <div> 
     <h1>nihil concursus bonorum omnium</h1> 

     <p>Quo usque tandem abutere</p> 

     <p>Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet?</p> 

     <p>Tum denique interficiere, cum iam nemo tam inprobus, tam perditus, tam tui similis inveniri poterit, qui id non iure factum esse fateatur.</p> 
    </div> 
</div> 

<div class="content"> 
    <div> 
     <p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p> 

     <p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p> 

     <p>O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris.</p> 

     <p>An vero vir amplissumus, P. Scipio, pontifex maximus, Ti. Gracchum mediocriter labefactantem statum rei publicae privatus interfecit; Catilinam orbem terrae caede atque incendiis vastare cupientem nos consules perferemus? Nam illa nimis antiqua praetereo, quod C. Servilius Ahala Sp. Maelium novis rebus studentem manu sua occidit.</p> 

     <p>Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent.</p> 

     <p>Habemus senatus consultum in te, Catilina, vehemens et grave, non deest rei publicae consilium neque auctoritas huius ordinis; nos, nos, dico aperte, consules desumus.</p> 

     <p>Decrevit quondam senatus, ut L. Opimius consul videret, ne quid res publica detrimenti caperet; nox nulla intercessit; interfectus est propter quasdam seditionum suspiciones C. Gracchus, clarissimo patre, avo, maioribus, occisus est cum liberis M. Fulvius consularis.</p> 

     <p>Simili senatus consulto C. Mario et L. Valerio consulibus est permissa res publica; num unum diem postea L. Saturninum tribunum pl. et C. Servilium praetorem mors ac rei publicae poena remorata est? At vero nos vicesimum iam diem patimur hebescere aciem horum auctoritatis.</p> 
    </div> 
</div> 

</body> 
</html>

EDIT2：這裏的另一個有更多的幕簾現象（在下面的註釋也掛）被提及的版本：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

body { 
    margin:0; padding: 0; 
    background-image: url(http://www.buildwindows.com/img/secret.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-color: #27485b; 
    background-attachment: fixed; 
    } 

    h1 {margin: 0 0 40px 0; font-size: 3em;} 

    .head div, .content div {width: 50%; margin: 0 auto;} 

    .content {background: white;} 

    .head {min-height: 500px; color: white;} 

</style> 

</head> 
<body> 

    <div class="wrapper"> 
     <div class="head"> 
      <div> 
      <h1>nihil concursus bonorum omnium</h1> 

      <p>Quo usque tandem abutere</p> 

      <p>Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet?</p> 

      <p>Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet?</p> 

      <p>Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet?</p> 

      </div> 
     </div> 

     <div class="content"> 
      <div> 
      <p>Tum denique interficiere, cum iam nemo tam inprobus, tam perditus, tam tui similis inveniri poterit, qui id non iure factum esse fateatur.</p> 
      <p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p> 

      <p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p> 

      <p>O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris.</p> 

      <p>An vero vir amplissumus, P. Scipio, pontifex maximus, Ti. Gracchum mediocriter labefactantem statum rei publicae privatus interfecit; Catilinam orbem terrae caede atque incendiis vastare cupientem nos consules perferemus? Nam illa nimis antiqua praetereo, quod C. Servilius Ahala Sp. Maelium novis rebus studentem manu sua occidit.</p> 

      <p>Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent.</p> 

      <p>Habemus senatus consultum in te, Catilina, vehemens et grave, non deest rei publicae consilium neque auctoritas huius ordinis; nos, nos, dico aperte, consules desumus.</p> 

      <p>Decrevit quondam senatus, ut L. Opimius consul videret, ne quid res publica detrimenti caperet; nox nulla intercessit; interfectus est propter quasdam seditionum suspiciones C. Gracchus, clarissimo patre, avo, maioribus, occisus est cum liberis M. Fulvius consularis.</p> 

      <p>Simili senatus consulto C. Mario et L. Valerio consulibus est permissa res publica; num unum diem postea L. Saturninum tribunum pl. et C. Servilium praetorem mors ac rei publicae poena remorata est? At vero nos vicesimum iam diem patimur hebescere aciem horum auctoritatis.</p> 
      </div> 
     </div> 
    </div> 


</body> 
</html>

來源

2013-05-07 23:25:49

但是，您如何知道內容應在多大程度上根據當前的高度image – dougmacklin 2013-05-07 23:29:58

我們可能需要更多關於您要做什麼的信息。我在上面添加了一個簡單的例子，這可能需要一些工作。真的，如果你使用背景圖片，你不需要在容器上設置高度，因爲內容會給它高度。您在圖像下方想要的任何內容將自然地位於圖像容器下方，處於文檔的正常流程中。 – 2013-05-07 23:35:26

我試圖讓圖像或圖像滑塊填充頁面的整個寬度，而高度調整爲保持原始高寬比。位於滑塊下方的內容隨後會在用戶滾動時像窗簾一樣翻滾 – dougmacklin 2013-05-07 23:39:44

只是你能設置高度：

img { 
    width: 100%; 
    height: 300px; /*or whatever*/ 
}

來源

2013-05-07 23:26:27 dave

我希望圖像保留其尺寸 – dougmacklin 2013-05-07 23:28:58

響應CSS圖片幕布效果

回答

相關問題