CSS背景-当rotateY在悬停时图像覆盖div
CSS背景-当rotateY在悬停时图像覆盖div
提问于 2018-11-14 10:40:42
我有一张卡，当它悬停时有翻转效果。该卡有一个背景图像，每一方有一个颜色，以透明梯度。
当卡翻转时，背景图像位置在顶部，超过梯度和div内容.没有背景图像，效果很好。
如何解决这一问题，并将图像置于内容和梯度之下？
下面是代码https://codepen.io/ramonsan/pen/QJpgrv的代码库
.flip-card {
perspective: 1000px;
height: 400px;
width: 300px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
padding: 1em;
padding-top: 5rem;
}
.flip-card-front {
background: -moz-linear-gradient(top, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6499d2', endColorstr='#007db9e8', GradientType=0);
/* IE6-9 */
color: white;
}
.flip-card-back {
transform: rotateY(180deg);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
/* IE6-9 */
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}<div class="flip-card col-6 col-md-4 pb-4 mb-0">
<div class="flip-card-inner" style="background-image: url(https://images.wallpaperscraft.com/image/glare_circles_spots_background_dots_bright_61905_240x400.jpg);">
<div class="flip-card-front">
<h1>FRONT</h1>
</div>
<div class="flip-card-back">
<h2>Back</h2>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-14 10:58:48
考虑在内部div中使用背景图像。我使用了一个CSS变量来简化处理，避免在CSS中定义图像，这样您就可以通过内联样式不断地调整它。
.flip-card {
perspective: 1000px;
height: 400px;
width: 300px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
padding: 1em;
padding-top: 5rem;
}
.flip-card-front {
background:
linear-gradient(to bottom, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%),
var(--i);
color: white;
}
.flip-card-back {
transform: rotateY(180deg);
background:
linear-gradient(to bottom, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%),
var(--i);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}<div class="flip-card col-6 col-md-4 pb-4 mb-0">
<div class="flip-card-inner" style="--i: url(https://images.wallpaperscraft.com/image/glare_circles_spots_background_dots_bright_61905_240x400.jpg);">
<div class="flip-card-front">
<h1>FRONT</h1>
</div>
<div class="flip-card-back">
<h2>Back</h2>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53298270
复制相关文章
相似问题
腾讯云开发者
