使用2D变换时1px白线

时间:2015-06-03 18:20:00

标签: html css html5 css3

我有一张带有背景图像的图像,并且悬停在它上面将使用CSS 2D变换进行缩放和旋转。一切都很好,除了1px的白色间隙线,看起来很糟糕。这不仅仅发生在Chrome中,而是发生在几乎所有浏览器中。我尝试了以下内容,但没有成功:

  • -webkit-backface-visibility: hidden添加到图片div和/或 它的包装
  • -webkit-transform: translateZ(0) scale(1.0, 1.0)添加到图片div和/或其包装器
  • 尝试不同的display
  • 尝试不同的position

我认为只有在使用overflow: hidden时才会出现此问题。

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

1 个答案:

答案 0 :(得分:1)

好吧,因为z-index,来自#main-content .education .article的清晰z-index,你可以将z-index设置为.logo,将.social-icons设置为20,以便将其带到前面。< / p>

#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;
}