我刚开始自己建站。当我在做一个项目卡片组件时，结构包括一个带有overflow: hidden的容器、一个在悬停时会放大的绝对定位背景图片，以及一个相对定位的内容框覆盖在图片的一部分上。

问题：当鼠标悬停在卡片上以触发背景图片上的transform: scale(1.05)，内层白色内容框边缘会出现一条1像素的深色线条/抖动伪影。看起来像是一个亚像素抗锯齿问题，在缩放过渡期间背景图片渗透到覆盖框的边缘。

我尝试向容器、图片和覆盖框添加transform: translateZ(0)和backface-visibility: hidden。（这能消除抖动，但会让那条1像素深色线永久出现。）在图片上添加will-change: transform，并通过top: -2px; left: -2px; width: calc(100% + 4px);来放大图片以将边缘推离边界框。

但都没有奏效

以下是我的代码：HTML

<article class="projects-card hover-group">
    <div class="projects-card__bg">
        <img src="https://images.unsplash.com/photo-1541888086425-d81bb19240f5?q=80&w=1000&auto=format&fit=crop" alt="Project">
    </div>
    <div class="projects-card__overlay">
        <span class="projects-card__badge">COMMERCIAL</span>
        <div class="projects-card__content">
            <h3>PRESTIGE CENTRAL TOWERS</h3>
            <p>Constructed a modern high-rise with innovative design, ensuring safety.</p>
        </div>
    </div>
</article>

以及我的SCSS：

.projects-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 3/4; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    overflow: hidden;
    cursor: pointer;
    background-color: #f5f5f5;
}

.projects-card__bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

.projects-card__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.projects-card__overlay {
    position: relative;
    z-index: 2;
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.projects-card__badge {
    background-color: #d8eaf5; 
    color: #000;
    padding: 8px 20px;
}

.projects-card__content {
    background-color: #ffffff;
    width: 100%;
    padding: 40px 25px;
}

.projects-card:hover .projects-card__bg img {
    transform: scale(1.05); 
}

有谁能给出我的问题的解决方案吗？

解决方案

这是在缩放图像时常见的亚像素渲染问题——你的代码没问题。最干净的修复方法是避免边界的完全对齐，让浏览器不要去对那条边界做抗锯齿。

尝试这个修复 -

.projects-card__content {
  background: #fff;
  margin-top: -1px; // small overlap removes the 1px seam
}

你也可以默认对图片略微放大 -

.projects-card__bg img {
  transform: scale(1.01);
}

如果你想尝试并理解变换如何影响渲染，可以试试这个工具 - CSS Transform Playground