我有一张带有背景图像的图像,并且悬停在它上面将使用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;
}
现场演示:
答案 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;
}