大家好，我正在尝试使网页看起来像下面的画布设计，但我得到了下面的第二张图片作为我的结果。 我的 Canva 设计 我的结果
我当前的设计 HTML 代码如下所示
<body>
<div style="display: flex;">
<div class="about-us-image">
<img class="about-image"
src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/smiling-handsome-asian-manager-with-modern-device.jpg"
alt="smiling-handsome-asian-manager-with-modern-device">
</img>
</div>
<div class="about-us-text">
<h2><h2 style="color: #56aeff;">Who We Are</h2>
<p>With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
</div>
</div>
</body>
我当前的设计 CSS 如下：
.about-us-image {
height: 100%;
width: 50%;
background-image: none;
background-color: none;
}
.about-image {
object-fit: contain;
}
.about-us-text {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: left;
padding: 20px;
width: 50%;
}
如果您想查看完整的代码，可以在我的代码笔上：我的代码笔
我尝试添加修改容器的 css 属性，使其没有背景图像和背景颜色，以允许出现来自外部 css 的原始背景图像，但 iyt 不起作用。我还尝试添加对象适合的属性来包含我的图像类，但它没有工作。
使用 background: url 属性。 例如 |
Background: URL('link.png'); //image link past here
并在 .about-us-image
中设置此属性