我試圖完成將兩個(gè)視差background-image并排放置，同時(shí)保持它們的縱橫比。我遇到的問題是每個(gè)圖像似乎都被垂直切成兩半。我嘗試在兩者中使用不同的值，background-attachment但 background-size沒有成功。從下面的代碼中刪除background-attachment: fixed;可以解決縱橫比問題，但會(huì)失去視差效果。有誰知道如何同時(shí)完成兩者？.image-left { width: 50%; float: left; height: 500px; background-attachment: fixed; background-position: center; background-repeat: none; background-size: cover; background-image: url('https://www.gstatic.com/webp/gallery/1.webp');}.image-right { width: 50%; float: left; height: 500px; background-attachment: fixed; background-position: center; background-repeat: none; background-size: cover; background-image: url('https://www.gstatic.com/webp/gallery/2.webp');}.content { text-align: center; padding: 100px 30px; font-size: 1.25rem; color: #fff; background-color: orange;}<div class="content"> <h1>Lorem</h1></div><div class="image-left"></div><div class="image-right"></div><div class="content"> <h1>Ipsum</h1></div>在這里 小提琴上面的代碼。我還嘗試使用這篇文章中的 jQuery 函數(shù)，但無法讓它與并排圖像一起使用。（參見小提琴）$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
3 回答
千巷貓影
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
正如其他人指出的那樣，我認(rèn)為你不能通過背景圖像實(shí)現(xiàn)你的目標(biāo)......
因此，我嘗試了另一種方法，該方法基本上包括： - 有兩個(gè)部分：一個(gè)用于圖像，另一個(gè)用于內(nèi)容。- 對于圖像，將它們包裝到一個(gè)元素中并使用固定位置。它們位于元素的最頂部，如果您想更改它，可以使用top屬性。- 至于內(nèi)容，兩個(gè)區(qū)域也都包裝在一個(gè)絕對位置的容器中。- 底部的內(nèi)容將負(fù)責(zé)圖像中的“呼吸”空間，因此，您需要進(jìn)行操作margin-top才能達(dá)到預(yù)期的效果。
一些注意事項(xiàng)： - 給定的示例目前僅適用于臺(tái)式機(jī)，在全屏筆記本電腦（寬度約為 1680px）上進(jìn)行了測試。- 如果縮小屏幕，一切都會(huì)變得非常糟糕，因此，您將需要通過媒體查詢調(diào)整移動(dòng)設(shè)備的所有措施。- 底部元素有一個(gè) min-height 屬性，僅用于演示目的。
綜上所述，我不太確定這是否是我會(huì)推薦的東西。
你真的可以將兩張圖片合并為一張嗎？這樣就可以直接使用后臺(tái)的方式，就不需要這樣的開發(fā)了。
我不喜歡我的方法，因?yàn)樗芏辔恢玫墓潭ㄖ?，最終，這會(huì)引入可維護(hù)性問題。
我希望它有幫助！
.image-wrapper {
position: fixed;
top: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.image {
width: 100%;
}
.content-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
.content-bottom {
margin-top: 300px;
min-height: 1000px;
}
<div class="image-wrapper">
<img class="image" src="https://www.gstatic.com/webp/gallery/1.webp">
<img class="image" src="https://www.gstatic.com/webp/gallery/2.webp">
</div>
<div class="content-wrapper">
<div class="content">
<h1>Lorem</h1>
</div>
<div class="content content-bottom">
<h2>Ipsum</h2>
</div>
</div>
犯罪嫌疑人X
TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊
最好的方法是為圖像提供一個(gè)固定位置的容器。
這是我的解決方案，使用這個(gè)想法，但無需調(diào)整大小即可工作
請注意，由于現(xiàn)在圖像僅覆蓋屏幕寬度的一半，因此它們也將覆蓋高度的一半。如果圖像處于縱向模式，則可以修復(fù)此問題。為了使用當(dāng)前圖像獲得更好的結(jié)果，我添加了另一行圖像，現(xiàn)在順序顛倒了（僅對某些屏幕比例可見）
.images {
? position: fixed;
? width: 100%;
? z-index: -1;
}
.images div {
? display: inline-block;
? width: 49%;
? margin: 0;
? height: 500px;
? background-position: center;
? background-size: cover;
}
.image-left {
? background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
? background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}
.content {
? text-align: center;
? padding: 100px 30px;
? font-size: 1.25rem;
? color: #fff;
? background-color: orange;
}
.filler {
? height: 500px;
}
<div class="images">
? <div class="image-left"></div>
? <div class="image-right"></div>
? <div class="image-right"></div>
? <div class="image-left"></div>
</div>
<div class="content">
? <h1>Lorem</h1>
</div>
<div class="filler"></div>
<div class="content">
? <h1>Ipsum</h1>
</div>
holdtom
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
.flexrow {
display: flex;
flex-flow: row wrap;
}
.flexrow > .image {
flex: 0 1 50%;
min-height: 350px;
background-size: 100%;
}
.img1 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ;
}
.img2 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ;
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
<div class="content">
<h1>Lorem</h1>
</div>
<div class="flexrow">
<div class="image img1"></div>
<div class="image img2"></div>
</div>
<div class="content">
<h1>Ipsum</h1>
</div>
認(rèn)為這就是您正在尋找的，請記住，當(dāng)沒有可用空間（調(diào)整大小、低分辨率時(shí)）時(shí)，圖像上的 min-height 屬性可能會(huì)破壞此縱橫比。
- 3 回答
- 0 關(guān)注
- 184 瀏覽
添加回答
舉報(bào)
0/150
提交
取消