html - CSS:如何只变换背景而不变换内部内容？

Question

fiddle :https://jsfiddle.net/jzhang172/Lhpx8u3g/

在我的每个框中，字体大小随我的背景而变化，我该如何具体制作它以便只有我的背景发生变化而我的字体大小保持不变？

*{
  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%;
}

<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>

Answer 1

问题就出在这里

.bottom-wrap:hover h2 {

悬停效果继承了文本颜色。您可以将其完全删除，或使用 <h2 style="color:white">Articles</h2> 内嵌标题样式。

希望对你有帮助