我有一个带有背景图像div,在div中我有一个名为Hero的组件。我想在一个带有className newBigButton的div上应用一个简单的悬停效果,但是过渡是如此滞后,但是当我删除背景图像时,过渡工作正常。.下面是代码:
<div
className="hero-section"
style={{
flex: 1,
display: "flex",
backgroundImage: bg ? `url(${bg})` : "",
backgroundPosition: " 60% center",
}}
>
<Hero />
</div>
字符串
Hero组件代码的一部分:
<div style={{marginTop: "15vh"}} className="d-flex w-100 flex-column justify-content-center align-items-center">
<div style={{gap: "20vh"}} className="d-flex ">
<div className={styles.newBigButton}>BESOIN IMMÉDIAT</div>
<div className={styles.newBigButton}>PROJET À VENIR</div>
</div>
<div style={{marginTop: "8vh"}} className={styles.newBlueButton}>Demander une démo</div>
</div>
型
CSS:
.newBigButton {
color: #2863a9;
background-color: #fff;
border-radius: 10px;
border: 2px solid #2863a9;
padding: 3.5vh 2vh;
font-weight: 800;
cursor: pointer;
transition: 0.1s linear;
}
.newBigButton:hover{
transition: 0.1s linear;
background-color: #2863a9;
color: #fff;
}
型
1条答案
按热度按时间rn0zuynd1#
当你的英雄部分div中有一个背景图像时,你会遇到滞后的过渡效果,这可能是由于浏览器的渲染性能,特别是当背景图像很大或组件结构很复杂时。
大型图像可能需要一些时间来加载和渲染,这可能会影响CSS过渡的平滑度。
您可能需要尝试优化背景图像
确保您的背景图像已针对Web进行适当优化。您可以使用图像编辑软件来减小其大小和分辨率,同时保持可接受的质量。较小的图像文件将加载得更快并提高性能。