Html 在我的例子中，如何在CSS中的图像上显示文本？_Html_Css_Responsive

Html 在我的例子中，如何在CSS中的图像上显示文本？

html css

Html 在我的例子中，如何在CSS中的图像上显示文本？,html,css,responsive,Html,Css,Responsive,我有下面的CSS表单，它是一个在两面显示两个背景图像的响应式翻转卡。我试图在它们上面显示文本，但由于某种原因，它没有显示在浏览器中。以下是CSS： .container { padding: 1em; margin: 0px auto; max-width: 100%; text-align: center; -webkit-perspective: 800px; perspective: 800px; } .card { width: 90%; border-

我有下面的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>


此处文本

谢谢你的帮助

添加

行高：1到类前面或删除行高：300px来自类面，具体取决于您在其他地方对类面的使用

.container{
填充：1em；
保证金：0px自动；
最大宽度：100%；
文本对齐：居中；
-webkit透视图：800px；
透视图：800px；
}
.卡片{
宽度：90%；
边界半径：20px；
高度：170px；
保证金：10美元；
位置：相对位置；
-webkit过渡：所有0.4s都轻松推出；
-moz过渡：所有0.4都会变缓；
过渡：所有0.4s缓解；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
}
.脸：之后{
位置：绝对位置；
最高：100%；
左：0；
z指数：-1；
显示：块；
内容：''；
高度：22px；
宽度：100%；
背景：url（'http://media.a-g.fr/crea/talenance/shadow.png")不重复;；
背景大小：100%；
}
.脸{
边界半径：20px；
位置：绝对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
线高：300px；
颜色：白色；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
过渡：0.3秒，全部缓进缓出；
-webkit过渡：0.3s，全部轻松输入输出；
-moz转换：0.3秒，全部轻松输入输出；
}
.前线{
背景：url(https://s3.amazonaws.com/uifaces/faces/twitter/eomerx/128.jpg)中心；
背景尺寸：封面；
z指数：2；
文本对齐：居中；
字号：4em；
位置：绝对位置；
线高：1；
}
.回来{
z指数：1；
背景色：#28255f；
变换：旋转（180度）；
}
.背a{
线高：250px；
字体大小：14px；
字号：700；
文字装饰：无；
宽度：100%；
身高：50%；
文本对齐：居中；
颜色：黑色；
显示：块；
过渡：0.3秒，全部缓进缓出；
-webkit过渡：0.3s，全部轻松输入输出；
-moz转换：0.3秒，全部轻松输入输出；
}
a:以前{
内容：“；
背景尺寸：封面；
位置：绝对位置；
宽度：50px；
高度：50px；
左：0；
右：0；
保证金：0自动；
滤光片：反转（100%）亮度（150%）；
-webkit过滤器：反转（100%）亮度（150%）；
}
.背面：第n种类型（1）：前面{
背景：url(http://media.a-g.fr/crea/talenance/linkedin.png)无重复中心；
顶部：30px；
}
.背面：第n种类型（2）：前面{
背景：url(http://media.a-g.fr/crea/talenance/email.png)无重复中心；
底部：30px；
}
.背a:悬停{
不透明度：0.5；
}
.卡：悬停。前{
变换：旋转（-180度）；
}
.卡：悬停。后退{
变换：旋转（0度）；
}

此处文本
从.face
选择器中移除行高
最终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);
}

演示：
CSS我希望这就是您想要的
.container {
padding: 1em;
margin: 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);
}

 #text {
  text-align: center}

HTML

此处文本
是否要将文本移动到前面的顶部？从面类css中删除行高：）从面类css中删除行高无效。浏览器中没有文本。只是图像。我想显示文本和格式化它。谢谢，但它不工作的原因。文字可能仍在图像下方…这显然不是我希望文字显示的位置。好的，那么您希望它如何显示，或者线条高度调整是否适用于u？
<div id="text">
<h2>TEXT HERE<h2>
</div>
<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">
        </div>
        <div class="face back">
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </div>
</div>