1px使用2D變換時的白線

Question

我有一張帶有背景圖片的圖片，並且將其懸停在它上面，將使用CSS 2D變換進行縮放和旋轉。一切工作正常，除了1px的白色縫隙線，看起來很糟糕。這不僅僅發生在Chrome中，而是幾乎所有的瀏覽器。我試過以下，但沒有成功：

• 添加-webkit-backface-visibility: hidden到圖像DIV和/或 其包裝
• 添加-webkit-transform: translateZ(0) scale(1.0, 1.0)到圖像DIV和/或其包裝
• 嘗試不同display值
• 嘗試不同的position值

我想用時，這個問題只持續。

HTML：

<a href="#" class="article col-xs-4"> 
    <div class="article-overlay"></div> 

    <div class="article-content"> 
     <h2>Learn the skills to land your dream job</h2> 
     <h6>Education/Academy</h6> 
    </div> 

    <div class="article-image" style="background-image: url('assets/images/ed1.jpg')"></div> 
</a> 

CSS：

#main-content .education .article { 
    display: block; 
    height: 100%; 
    position: relative; 
    z-index: 1; 
    padding: 0; 
    text-decoration: none; 
    overflow: hidden; 
} 

#main-content .education .article .article-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    transition: all 0.5s; 
    background-color: rgba(0, 0, 0, 0.5); 
} 

#main-content .education .article:hover .article-overlay { 
    background-color: rgba(0, 0, 0, 0.35); 
} 

#main-content .education .article .article-image { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    background-position: center; 
    -webkit-transform: scale(1) rotate(0deg); 
    transform: scale(1) rotate(0deg); 
    transition: all 0.5s; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
} 

#main-content .education .article:hover .article-image { 
    -webkit-transform: scale(1.2) rotate(2deg); 
    transform: scale(1.2) rotate(2deg); 
} 

#main-content .education .article .article-content { 
    z-index: 3; 
    color: #fff; 
    position: relative; 
    text-align: center; 
    position: absolute; 
    width: 60%; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -100%); 
    transform: translate(-50%, -100%); 
} 

#main-content .education .article .article-content h2 { 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 22px; 
    letter-spacing: 1px; 
    line-height: 40px; 
    position: relative; 
    padding-top: 20px; 
    margin: 0; 
} 

#main-content .education .article .article-content h2:before { 
    content: ""; 
    display: block; 
    width: 150px; 
    height: 6px; 
    background-color: #bedb39; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -75px; 
} 

#main-content .education .article .article-content h6 { 
    font-weight: normal; 
    text-transform: uppercase; 
    font-size: 16px; 
    position: relative; 
    padding-top: 20px; 
    margin: 0; 
} 

#main-content .education .article .article-content h6:before { 
    content: ""; 
    display: block; 
    width: 150px; 
    height: 2px; 
    background-color: #fff; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -75px; 
} 

現場演示：

http://amarsyla.com/sandbox/codo/education.html

Answer 1

確定，它從#main-content .education .article的z-index，清晰的z-index的becouse和您可以將z-index設置爲.logo和.social-icons例如20，以便將其帶到前面。

#main-content .education .article { 
    display: block; 
    height: 100%; 
    position: relative; 
    padding: 0; 
    text-decoration: none; 
    overflow: hidden; 
} 

#header .logo, #header .social-icons { 
    z-index: 20; 
}