CSS媒体查询不适用于：before属性

109

泰亚卜·古谢尔·沃赫拉

我正在尝试在平板电脑设备上应用媒体查询，但媒体查询中的所有内容都在工作，除了before属性，在该属性中我必须减小高度，这是我的CSS代码

@media screen and (max-width: 767px) {
  .img-overlay:before {
  content: ' ';
  display: block;
  height:   5% !important;
  }
}

这是我的HTML

<div class="img-wrapper headerimage">
   <img src="images/banner.jpg" alt="Start Learning With Hifzil" class="img-responsive" >
   <div class="img-overlay align-middle">
      <h1 class="headingBox text-center">Start Learning With Hifzil</h1>
      <h4 class="smallBox text-center">Join Now, Enrolled In Class , Play & Learn</h4>
      <div class="mx-auto d-block btnBox">
         <button class="btn valign">Students, start now</button>
         <button class="btn valign" style="background: #fff;color:#7952b3">Teachers, start now</button>
         <button class="btn valign" style="background: #fff;color:#7952b3">Administration Panel</button>
      </div>
   </div>
</div>

米海

问题是您以百分比设置高度。例如5%什么？该img-overlaydiv有一个指定的高度？如果没有，它将5%一事无成，一无所获。

在img-overlaydiv上设置一个指定的高度，它将起作用。见下文（我加了height:100px）

或者您可以使用不以百分比为单位的高度

 .img-overlay {
   height: 100px
 }
 
 .img-overlay:before {
   content: '';
   display: block;
   height: 15% !important;
   background: red;
   width: 100px;
 }
 
 @media screen and (max-width: 767px) {
   .img-overlay:before {
     height: 5% !important;
   }
 }

<div class="img-wrapper headerimage">
  <img src="images/banner.jpg" alt="Start Learning With Hifzil" class="img-responsive">
  <div class="img-overlay align-middle">
    <h1 class="headingBox text-center">Start Learning With Hifzil</h1>
    <h4 class="smallBox text-center">Join Now, Enrolled In Class , Play & Learn</h4>
    <div class="mx-auto d-block btnBox">
      <button class="btn valign">Students, start now</button>
      <button class="btn valign" style="background: #fff;color:#7952b3">Teachers, start now</button>
      <button class="btn valign" style="background: #fff;color:#7952b3">Administration Panel</button>
    </div>

  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。