我希望網站的部分看起來像這樣：
但現在我的看起來像這樣：
如何增加右側影像的高度以覆寫about-sec容器的整個高度？然后如何增加about-sec容器的高度，以便在保持視差效果的同時，可以在右側看到整個影像，如上例所示？
這是我的 CSS 代碼：
.about-sec {
width: 100%;
/* display: flex; */
flex-direction: column;
text-align: center;
justify-content: center;
background-color: white;
padding: 2% 0.5% 10% 0.5%;
overflow: hidden;
}
.left-half {
width: 50%;
position: abosulte;
height: 100%;
left: 0px;
/* */
}
.right-half {
position: absolute;
background-image: url("aboutSectionImage.jpg");
background-color: #cccccc;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 50%;
right: 0px;
height: 6em;
display: flex;
/* padding-left: 10%;
padding-top: 10%; */
}
這是我的反應/HTML 代碼：
import React from 'react';
import './aboutSection.css';
class AboutSection extends React.Component {
render() {
return (
<div className="about-sec" >
<div className="left-half">
asd
</div>
<div className="right-half">
Hi
<br></br>
df
</div>
</div>
);
}
}
export default AboutSection;
編輯
螢屏右側的影像有效，現在我正在嘗試添加視差滾動效果。該效果對我有用，但我不確定如何使影像僅占頁面的一半（右側）。當我設定background-size: cover;它應該占據 div 的整個大小，在這種情況下是right-halfdiv。由于某種原因，影像非常巨大，看起來像這樣：
有誰知道為什么會這樣？
CSS 代碼：
*{
box-sizing: border-box;
}
.about-sec{
display: flex;
flex-direction: row;
height: 90vh;
}
.left-half{
height: 100%;
width: 50%;
background: white;
}
.right-half{
height: 100%;
width: 50%;
background-image: url("aboutSectionImage.jpg");
background-color: #cccccc;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
uj5u.com熱心網友回復：
檢查以下css代碼以供參考。你真的不需要position: absolute;你的right-half課。你應該只positioning用來做微小的改變，你不應該用它來做你的布局。您似乎也不熟悉如何flexbox作業，請查看此鏈接以熟悉它。
編輯：影像表現得像您描述的那樣的原因是因為background-size屬性已設定為cover. 我已經將它專門針對這種情況設定50%為 for itswidth和100%for its height。您可以在此處了解有關該屬性及其語法的更多資訊。
*{
box-sizing: border-box;
margin: 0;
}
.about-sec{
display: flex;
flex-direction: row;
height: 120vh;
}
.left-half{
height: 100%;
width: 50%;
background: blue;
}
.right-half{
width: 50%;
height: 100%;
}
.parallax {
height: 100%;
background-image: url('https://external-content.duckduckgo.com/iu/?u=https://www.mmppicture.co.in/wp-content/uploads/2022/01/Picsart-Background-218-901x1080.jpg&f=1&nofb=1');
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: 50% 100%;
padding: 10px;
}
.content{
color: black;
background: white;
padding: 10px;
}<html>
<body>
<div class="about-sec">
<div class="left-half">
left
</div>
<div class="right-half">
<div class="parallax">
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea labore, culpa quos impedit exercitationem odit repudiandae ipsa aperiam? Dolor dolores omnis doloremque facere ipsam vitae, minima sint pariatur veritatis blanditiis.
Aliquid voluptates deserunt est, error dolorem quasi similique sapiente veniam quos facere beatae laborum adipisci earum perferendis perspiciatis non fugit repellendus officia deleniti libero animi doloribus? Tempore quae vitae autem?
</p>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
這是一個類似的示例，您可以更新類和 dom 結構，這里我使用 bootstrap 4.6
.fdb-block {
height: calc(100vh - 200px);
width: 100%;
}
.col-fill-right {
background-image: url("https://picsum.photos/1900/1000");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
right: 0;
bottom: 0;
top: 0;
height: 100%;
width: 50%;
}
@media all and (max-width:768px) {
.col-fill-right {
display: none;
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<section class="fdb-block">
<div class="col-fill-right">
</div>
<div class="container py-5">
<div class="row">
<div class="col-12 col-md-5 text-center">
<h1>Froala Blocks</h1>
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="mt-4 mb-5"><a class="btn btn-secondary" href="https://www.froala.com">Button</a></p>
<p>Follow us on</p>
<p>
<a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-twitter" aria-hidden="true"></i></a>
<a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-facebook" aria-hidden="true"></i></a>
<a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-instagram" aria-hidden="true"></i></a>
<a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-pinterest" aria-hidden="true"></i></a>
<a href="https://www.froala.com" class="mx-2 text-secondary"><i class="fab fa-google" aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408417.html
標籤：
下一篇：滾動到視圖中時啟動影片