我对div有个棘手的问题(至少对我来说),这是一个纯粹用css完成的翻转卡。卡的正面显示图像,背面有不同的图像和按钮。问题是由于流体设计我必须设置填充。哪些地方所有的div流体div中的中心按钮
.card {
margin: 0 auto;
position: relative;
float: left;
padding-bottom: 25%;
width: 100%;
max-width: 600px;
}
.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card__front,
.card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.7s;
transition: transform 0.7s;
}
.card__front {
background-image: url("http://i58.tinypic.com/mmu649.jpg");
padding-top: 56.25%;
background-size: cover;
-moz-background-size: cover;
background-position: center;
}
.card__back {
background-image: url("http://i58.tinypic.com/mmu649.jpg");
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
padding-top: 56.25%;
background-size: cover;
-moz-background-size: cover;
background-position: center;
}
.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card__text {
width: auto;
text-align: center;
height: 100%;
margin-top: -32%;
}
.button {
background-color: #000000;
text-indent: 0;
border: 1px solid #000000;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 21px;
font-weight: normal;
font-style: normal;
height: 69px;
line-height: 69px;
width: 200px;
text-decoration: none;
text-align: center;
opacity: 0.8;
}
.button:hover {
background: -webkit-gradient(linear, left top, left bottom, color- stop(0.05, #000000), color-stop(1, #000000));
background: -moz-linear-gradient(center top, #000000 5%, #000000 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color: #000000;
}
.button:active {
position: relative;
top: 1px;
}
<div class="card effect__hover">
<div class="card__front">
<div class="card__text"></div>
</div>
<div class="card__back">
<div class="card__text"> <a href="http://google.co.uk" class="button">see more</a>
</div>
</div>
</div>
<!-- /card -->
这里下面的文字是代码的预览:http://jsfiddle.net/j29mvoLm/
所有我想要得到的是在每一个卡中心的同一按钮像div一样。 有没有可能做到这一点,而不使用负余量?
没有工作,我已经把第一个代码我card__text元素内部和按钮结束图像 – user29200
播放与定位下方。而不是最高的50%,你可以使用5%或其他东西。这一切都与你已经拥有的CSS有关,所以这种方法并不一定适用。我知道你正在寻找一种方式来将它与CSS集中在一起,我给你的方法就是这样(至少其中之一)。您的自定义CSS可能会覆盖东西,从而导致它出现在图像的底部。 – Lansana