如何添加具有视差的容器宽度一半的图像？答案

【问题标题】：How can I add an image taking half the container width with parallax?如何添加具有视差的容器宽度一半的图像？
【发布时间】：2022-01-11 06:38:04
【问题描述】：

我希望网站的部分看起来像这样：

但现在我的看起来像这样：

如何增加右侧图像的高度以覆盖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%; */
}

这是我的 React/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;

【问题讨论】：

标签： html css image parallax

【解决方案1】：

padding: 2% 0.5% 0 0.5%;

在大约秒内使用它

【讨论】：

你知道怎么让右边的图片和容器约-sec高度一致吗？