我希望网站的部分看起来像这样：
但现在我的看起来像这样：
如何增加右侧影像的高度以覆写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/bootstrap@4.6.1/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>
0 评论