Question

小提琴：https://jsfiddle.net/jzhang172/Lhpx8u3g/

在我的每一个方框中，字体都会根据我的背景进行大小变换，我如何专门制作它以便只有我的背景变换但我的字体大小保持静态？

＆＃13;

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div#middlebottom {
    border-top: 5px solid white;
      display: flex;

    flex-wrap:wrap;
}
.bottom-section{
      border: 3px solid white;
    border-right: 1.5px;
  width:50%;
  height:300px;
      display: flex;
    justify-content: center;
    align-items: center;
  background:gray;
  margin-bottom:10px;
  position:relative;
  overflow:hidden;
}
.bottom-section h2{
  font-size:6em;
  font-family:Nothing You Could Do;
  color:white;
      text-shadow: 2px 2px 2px #6B6B6B;
}
#articles .bottom-wrap{
  background:url('img/bottom/1.jpg');
      background-repeat: no-repeat;
    background: 13% auto;
    background-position-y: -234px;
    background-size: 100% auto;
}
#projects .bottom-wrap{
  background:url('img/bottom/2.jpg');
      background-repeat: no-repeat;
    background: 13% auto;
    background-position-y: -234px;
    background-size: 100% auto;
    transition:1s;
}
#articles h2,#projects h2{
  z-index:5;
}
.bottom-wrap:before{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  content:"";
  background-color:rgba(0, 0, 0, 0.65);
  transition:1s;
}
.bottom-wrap:hover{
  transform: scale(1.21);

}
.bottom-wrap:hover h2{
  color:#4DE5FF;
}
#articles .bottom-wrap:hover:before{
  background-color:white;
}
#projects .bottom-wrap:hover:before{
  background-color:white;
}

.bottom-wrap{
        display: flex;
    justify-content: center;
    align-items: center;
  height:100%;
  width:100%;
   transition:1s;
}

.image-mover h2{
  font-size:4em;
  color:white;
  font-family:raleway;

}
.image-mover span.featured-text{
  font-size:.7em;
  background:none;
  color:#6686FF;

}
span.featured-thing{
  color:green;
}
.featured-wrap:before{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  content:"";
  background-color:rgba(0, 0, 0, 0.65);
  transition:1s;
}
.featured-wrap:hover:before{
  background-color:rgba(255, 255, 255, 0);
}
.featured-wrap:hover{
  transform: scale(1.21);

}
.featured-wrap{
  flex-direction: column;
  background:url('http://www.intrawallpaper.com/static/images/backgrounds_2_9AyfSD9.jpg');
      height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;

            display: flex;
    align-items: center;
    justify-content: center;
    transition:1s;
  }
  .featured-wrap h2{
          text-shadow: 2px 2px 2px black;
          transition:1s;
          z-index:3;
  }
  .featured-wrap:hover h2{
  color:#4DE5FF;
  font-size:6em;
}

.image-mover {
    overflow: hidden;
    height: 300px;
    width: 100%;
}

＆＃13;

<div class="section" id="middlebottom">
      <div class="image-mover">
        <div class="featured-wrap">
   <h2><span class="featured-text">hello |</span> <span class="featured-thing">Text</span></h2>
   <h3 class="descrip">A Description.</h3>
   </div>
     </div>
 
<div class="bottom-section" id="articles">
  <div class="bottom-wrap">
  <h2>Articles</h2>
  </div>
</div>
<div class="bottom-section" id="projects">
    <div class="bottom-wrap">
      <h2>Projects</h2>
    </div>
  </div>

   </div>

＆＃13;

Answer 1

这是问题发生的地方

<h2 style="color:white">Articles</h2>

文本颜色由悬停效果继承。您可以完全取出它，或者使用switchMap()

内嵌标题

希望这有帮助

CSS：如何仅转换背景而不是内容？

1 个答案: