2
私は両面に2つの背景イメージを表示しているレスポンシブルフリップカードのために次のCSSシートを持っています。私はそれらの上にテキストを取得しようとしていますが、何らかの理由でブラウザに表示されていません。ここでCSSです：私の場合、CSSの画像上にテキストを表示するにはどうすればいいですか？
.container {
padding: 1em;
margin: 0px auto;
max-width: 100%;
text-align: center;
-webkit-perspective: 800px;
perspective: 800px;
}
.card {
width: 90%;
border-radius:20px;
height: 170px;
margin: 10 auto;
position: relative;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.face:after {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
display: block;
content: '';
height: 22px;
width: 100%;
background: url('http://media.a-g.fr/crea/talenance/shadow.png') no-repeat;
background-size: 100%;
}
.face {
border-radius:20px;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 300px;
color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: 0.3s all ease-in-out;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
}
.front {
background: url(https://s3.amazonaws.com/uifaces/faces/twitter/eomerx/128.jpg) center center;
background-size:cover;
z-index: 2;
text-align: center;
font-size: 4em;
position: absolute;
}
.back {
z-index: 1;
background-color: #28255f;
transform:rotateY(180deg);
}
.back a {
line-height: 250px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
width: 100%;
height: 50%;
text-align: center;
color: black;
display: block;
transition: 0.3s all ease-in-out;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
}
.back a:before {
content:"";
background-size:cover;
position: absolute;
width:50px;
height: 50px;
left:0;
right:0;
margin:0 auto;
filter:invert(100%) brightness(150%);
-webkit-filter:invert(100%) brightness(150%);
}
.back a:nth-of-type(1):before {
background:url(http://media.a-g.fr/crea/talenance/linkedin.png) no-repeat center center;
top:30px;
}
.back a:nth-of-type(2):before {
background:url(http://media.a-g.fr/crea/talenance/email.png) no-repeat center center;
bottom:30px;
}
.back a:hover {
opacity:0.5;
}
.card:hover .front {
transform:rotateY(-180deg);
}
.card:hover .back {
transform:rotateY(0deg);
}
私は、背景画像の上にそこにテキストを挿入しようとしていますが、私は、このHTMLが動作しない理由はわからない：
<div class="container">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 cardContainer">
<div class="card" id="card">
<div class="face front">
TEXT HERE
</div>
<div class="face back">
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</div>
</div>
感謝をあなたの助け！
あなたは、前面の上部にテキストを移動しますか？ –
faceクラスcssから行の高さを削除します。 –
faceクラスcssから行の高さを削除しても機能しません。ブラウザにテキストはありません。ちょうどイメージ。 – mgeezy