響應式CSS圖像幕效果

Question

我正在嘗試產生類似於此頁面上的響應式幕布效果： http : //www.buildwindows.com/

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

如果您知道圖像的高度，這似乎很容易，因為您可以在內容上使用margin-top：

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

但是，如果將圖像設置為width：100％以便響應，則高度會隨着瀏覽器的寬度上下縮放，因此，margin-top技術不起作用。 可以僅通過CSS來實現此效果，還是需要通過窗口調整大小的偵聽器使用JavaScript？

Answer 1

通過將大圖像設置為容器上的背景圖像，並為其提供以下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>

Answer 2

您可以設置高度嗎？

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

響應式CSS圖像幕效果

問題描述

2 個解決方案

解決方案1
0 已采納 2013-05-07 23:25:49

解決方案2
0 2013-05-07 23:26:27

響應式CSS圖像幕效果

問題描述

2 個解決方案

解決方案1 0 已采納 2013-05-07 23:25:49

解決方案2 0 2013-05-07 23:26:27

解決方案1
0 已采納 2013-05-07 23:25:49

解決方案2
0 2013-05-07 23:26:27