文字不会显示在html / css页面

时间：2018-04-20 13:00:16

标签： html css

我在div中显示文本时遇到问题。当我希望它显示在心形盒子中时，下面代码中的

Livres

文本不会显示。

我现在已经将这个问题颠倒了一段时间，但无法找到它所在的位置。

.heart {
  z-index: 10;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0;
  margin-top: 100px;
  margin-left: 100px;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  -moz-transform: rotate(45deg);
  /* Mozilla */
  -o-transform: rotate(45deg);
  /* Opera? */
  transform: rotate(45deg);
  /* others */
  border-radius: 5px;
}

.heart:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: -50%;
  left: 0;
}

.heart:after {
  left: -50%;
  top: 0;
}

.round {
  z-index: 30;
  position: relative;
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0;
  top: -136px;
  left: 136px;
}

.arrow {
  z-index: 20;
  position: relative;
  width: 300px;
  height: 3px;
  margin: 0;
  top: 120px;
  left: -500px;
  background: blue;
  -ms-transform: rotate(-30deg);
  /* IE 9 */
  -webkit-transform: rotate(-30deg);
  /* Chrome, Safari, Opera */
  -moz-transform: rotate(-30deg);
  /* Mozilla */
  -o-transform: rotate(-30deg);
  /* Opera? */
  transform: rotate(-30deg);
  /* others */
  -ms-transition: 1s ease-in;
  -webkit-transition: 1s ease-in;
  -moz-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in;
}

.arrow:before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid blue;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

#menu1 {
  margin-left: 0px;
  margin-top: 100px;
}

#menu1 .heart,
#menu1 .heart:after,
#menu1 .round,
#menu3 .heart,
#menu3 .heart:after,
#menu3 .round {
  background: #86c879;
}

#menu1 .text-box,
#menu3 .text-box {
  background: linear-gradient(110deg, #ffffff, #86c879, #86c879, #ffffff);
}

.text-box {
  opacity: 0;
  margin: 0;
  margin-left: 325px;
  margin-top: -260px;
  width: 600px;
  height: 200px;
  -ms-transform: skew(20deg);
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
  -ms-transition: opacity 1s ease-out;
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

.text-box:after {
  content: "";
  display: table;
  clear: both;
}

.text {
  position: relative;
  float: left;
  margin: 0;
  top: 0;
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}

.left-part {
  width: 60%;
  padding-left: 30px;
}

.right-part {
  width: 40%;
}

.text h3 {
  padding: 0;
  padding-left: 50px;
}

.text p {
  padding: 0;
  padding-top: 35px;
  padding-left: 30px;
}

.text-box img {
  padding-top: 20px;
  padding-right: 30px;
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
  height: 80%;
  width: auto;
}
<div id="menu1">
  <a href="http://livres.yoga-enfant.net/">
    <div class="heart">
      <p>Livres</p>
    </div>
    <!-- Text not shown !!!!! -->
    <div class="round"></div>
    <div class="arrow"></div>
    <div class="text-box">
      <div class="text left-part">
        <h2>Livres de yoga pour enfants</h2>
        <h3>Nathalie H&eacute;raut</h3>
        <p>
          Voyages en yoga pour enfants, petits et grands
        </p>
      </div>
      <!-- left-part -->
      <div class "text right-part">
        <img src="images/Livre-Voyages-en-yoga.png" alt="Livre de yoga pour enfants : voyages en yoga pour enfants petits et grands - vol 1" />
      </div>
      <!-- right-part -->
    </div>
    <!-- text box -->
  </a>
</div>
<!-- menu1 -->

你的建议是什么？

如果您需要查看它的外观，请访问：www.yoga-enfant.net/index_heart.html

谢谢你， 克里斯托弗。

3 个答案:

答案 0 :(得分：1)

就是这样，我只是将它从heart内移到round并添加了一些样式。

这是一个片段：

＆＃13;
＆＃13; 
.heart {
  z-index: 10;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0;
  margin-top: 100px;
  margin-left: 100px;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  -moz-transform: rotate(45deg);
  /* Mozilla */
  -o-transform: rotate(45deg);
  /* Opera? */
  transform: rotate(45deg);
  /* others */
  border-radius: 5px;
}

.heart:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: -50%;
  left: 0;
}

.heart:after {
  left: -50%;
  top: 0;
}

.round {
  z-index: 30;
  position: relative;
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0;
  top: -135px;
  left: 135px;
}

.arrow {
  z-index: 20;
  position: relative;
  width: 300px;
  height: 3px;
  margin: 0;
  top: 120px;
  left: -500px;
  background: blue;
  -ms-transform: rotate(-30deg);
  /* IE 9 */
  -webkit-transform: rotate(-30deg);
  /* Chrome, Safari, Opera */
  -moz-transform: rotate(-30deg);
  /* Mozilla */
  -o-transform: rotate(-30deg);
  /* Opera? */
  transform: rotate(-30deg);
  /* others */
  -ms-transition: 1s ease-in;
  -webkit-transition: 1s ease-in;
  -moz-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in;
}

.arrow:before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid blue;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

#menu1 {
  margin-left: 0px;
  margin-top: 100px;
}

#menu1 .heart,
#menu1 .heart:after,
#menu1 .round,
#menu3 .heart,
#menu3 .heart:after,
#menu3 .round {
  background: #86c879;
}

#menu1 .text-box,
#menu3 .text-box {
  background: linear-gradient(110deg, #ffffff, #86c879, #86c879, #ffffff);
}

.text-box {
  opacity: 0;
  margin: 0;
  margin-left: 325px;
  margin-top: -260px;
  width: 600px;
  height: 200px;
  -ms-transform: skew(20deg);
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
  -ms-transition: opacity 1s ease-out;
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

.text-box:after {
  content: "";
  display: table;
  clear: both;
}

.text {
  position: relative;
  float: left;
  margin: 0;
  top: 0;
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}

.left-part {
  width: 60%;
  padding-left: 30px;
}

.right-part {
  width: 40%;
}

.text h3 {
  padding: 0;
  padding-left: 50px;
}

.text p {
  padding: 0;
  padding-top: 35px;
  padding-left: 30px;
}

.text-box img {
  padding-top: 20px;
  padding-right: 30px;
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
  height: 80%;
  width: auto;
}

.livresText {
  position: absolute;
  top: 30px;
  left: -5px;
  z-index: 11;
}
＆＃13; 
<div id="menu1">
  <a href="http://livres.yoga-enfant.net/">
    <div class="heart">
    </div>
    <!-- Text not shown !!!!! -->
    <div class="round">
       <p class="livresText">Livres</p>
    </div>
    <div class="arrow"></div>
    <div class="text-box">
      <div class="text left-part">
        <h2>Livres de yoga pour enfants</h2>
        <h3>Nathalie H&eacute;raut</h3>
        <p>
          Voyages en yoga pour enfants, petits et grands
        </p>
      </div>
      <!-- left-part -->
      <div class="text right-part">
        <img src="images/Livre-Voyages-en-yoga.png" alt="Livre de yoga pour enfants : voyages en yoga pour enfants petits et grands - vol 1" />
      </div>
      <!-- right-part -->
    </div>
    <!-- text box -->
  </a>
</div>
<!-- menu1 -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我认为问题是z-index请设置两个圈子z-index来增加p标签。像那样，

Css:
    .round {
      z-index: 0;
    }
    .heart:after {
    z-index: -1;
    }

答案 2 :(得分：0)

你需要将心脏类放在z-index的前面：100;例如，然后将以下内容添加到您的css中：

.heart > p {
     position: absolute;
     z-index: 999;
     width: 150%;
     top: 10%;
     left: -40%;
     text-align: center;
    -ms-transform: rotate(-45deg);
    /* IE 9 */
    -webkit-transform: rotate(-45deg);
    /* Chrome, Safari, Opera */
    -moz-transform: rotate(-45deg);
    /* Mozilla */
    -o-transform: rotate(-45deg);
    /* Opera? */
    transform: rotate(-45deg);
    /* others */
    }


.heart {
  z-index: 50;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0;
  margin-top: 100px;
  margin-left: 100px;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  -moz-transform: rotate(45deg);
  /* Mozilla */
  -o-transform: rotate(45deg);
  /* Opera? */
  transform: rotate(45deg);
  /* others */
  border-radius: 5px;
}

.heart > p {
  position: absolute;
  z-index: 999;
  width: 150%;
  top: 10%;
  left: -40%;
  text-align: center;
    -ms-transform: rotate(-45deg);
  /* IE 9 */
  -webkit-transform: rotate(-45deg);
  /* Chrome, Safari, Opera */
  -moz-transform: rotate(-45deg);
  /* Mozilla */
  -o-transform: rotate(-45deg);
  /* Opera? */
  transform: rotate(-45deg);
  /* others */
}

.heart:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: -50%;
  left: 0;
}

.heart:after {
  left: -50%;
  top: 0;
}

.round {
  z-index: 30;
  position: relative;
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0;
  top: -136px;
  left: 136px;
}

.arrow {
  z-index: 20;
  position: relative;
  width: 300px;
  height: 3px;
  margin: 0;
  top: 120px;
  left: -500px;
  background: blue;
  -ms-transform: rotate(-30deg);
  /* IE 9 */
  -webkit-transform: rotate(-30deg);
  /* Chrome, Safari, Opera */
  -moz-transform: rotate(-30deg);
  /* Mozilla */
  -o-transform: rotate(-30deg);
  /* Opera? */
  transform: rotate(-30deg);
  /* others */
  -ms-transition: 1s ease-in;
  -webkit-transition: 1s ease-in;
  -moz-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in;
}

.arrow:before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid blue;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

#menu1 {
  margin-left: 0px;
  margin-top: 100px;
}

#menu1 .heart,
#menu1 .heart:after,
#menu1 .round,
#menu3 .heart,
#menu3 .heart:after,
#menu3 .round {
  background: #86c879;
}

#menu1 .text-box,
#menu3 .text-box {
  background: linear-gradient(110deg, #ffffff, #86c879, #86c879, #ffffff);
}

.text-box {
  opacity: 0;
  margin: 0;
  margin-left: 325px;
  margin-top: -260px;
  width: 600px;
  height: 200px;
  -ms-transform: skew(20deg);
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
  -ms-transition: opacity 1s ease-out;
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

.text-box:after {
  content: "";
  display: table;
  clear: both;
}

.text {
  position: relative;
  float: left;
  margin: 0;
  top: 0;
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}

.left-part {
  width: 60%;
  padding-left: 30px;
}

.right-part {
  width: 40%;
}

.text h3 {
  padding: 0;
  padding-left: 50px;
}

.text p {
  padding: 0;
  padding-top: 35px;
  padding-left: 30px;
}

.text-box img {
  padding-top: 20px;
  padding-right: 30px;
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
  height: 80%;
  width: auto;
}
<div id="menu1">
  <a href="http://livres.yoga-enfant.net/">
    <div class="heart">
       <p>Livres</p>
    </div>
    <!-- Text not shown !!!!! -->
    <div class="round"></div>
    <div class="arrow"></div>
    <div class="text-box">dsf
      <div class="text left-part">
        <h2>Livres de yoga pour enfants</h2>
        <h3>Nathalie H&eacute;raut</h3>
        <p>
          Voyages en yoga pour enfants, petits et grands
        </p>
      </div>
      <!-- left-part -->
      <div class "text right-part">
        <img src="images/Livre-Voyages-en-yoga.png" alt="Livre de yoga pour enfants : voyages en yoga pour enfants petits et grands - vol 1" />
      </div>
      <!-- right-part -->
    </div>
    <!-- text box -->
  </a>
</div>
<!-- menu1 -->

希望它有所帮助。

相关问题
最新问题