不透明度在媒体查询

我设置opacity 2元件，li元件和image元件未设置。在hover效果，我带走了不透明。

问题：我正在使用媒体查询在移动电话上显示我的网站。问题是，当我设置的媒体查询1024px，我想带走的opacities完全，但是当视低于以及1,024像素...刷新它不会触发

这是为什么：

代码：

HTML：

 <div id="app" class="span3">    
      <ul> 
       <li id="apple"><a href="#" title="PartyAt for iPhone and iPad"><img src="images/apple.png" /></a></li> 
       <li id="android"><a href="#"><img alt="PartyAt Android app on Google Play" src="images/android.png" /></a></li>      
      </ul> 
    </div> 

and 

<div id="social" class="row-fluid"> 
     <div class="span7"> 
      <div id="app2">    
       <a href="https://itunes.apple.com/za/app/partyat/id597807299?mt=8" title="PartyAt for iPhone and iPad"><img src="images/apple.png" /></a> 
       <a href="https://play.google.com/store/apps/details?id=io.ik.partyat"><img alt="PartyAt Android app on Google Play" src="images/android.png" /></a>   
      </div>    
     </div>  
     <div class="span5"> 
      <a href="" title="PartyAt SA facebook page" target="_blank"><img src="images/fb.png" border="0" /></a> 
      <a href="" title="PartyAt SA twitter page" target="_blank"><img src="images/twitter.png" border="0" /></a>    
     </div> 
</div>

CSS：

#app ul li{ 
     opacity:0.7; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
     filter:alpha(opacity=70); 
     padding-bottom: 15px; 
    } 

#social .span5 img { 
     opacity: 0.7; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
     filter:alpha(opacity=70); 
    }

媒体查询：

@media screen and (max-width: 1024px;){ 
#app ul li { 
     opacity:1; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
     filter:alpha(opacity=100); 
     padding-bottom: 15px; 
     } 

#social .span5 img { 
     opacity: 1; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
     filter:alpha(opacity=100); 
} 

}

来源

2013-02-15 DextrousDave

你的媒体查询可能是工作，但在这之后，你要覆盖它：

@media screen and (max-width: 1024px;){ 
    /* your custom styles... */ 
    #app ul li { opacity:1; } 
} 

/* normal styles */ 
#app ul li { opacity:0.7; }

所以，你可以使用!important避免冲突：

#app ul li { opacity:1 !important; }

警告：如果有更好的解决方案，则不应使用!important。请阅读以下内容：

当两个CSS规则是冲突的，优先顺序是：用!important

规则具有最高优先级
内嵌样式比普通款式

<div class="someclass" style="inline style"></div>

更具体的规则>特定更少（#one .example tag .yeah>.yeah）
如果两个规则具有相同的优先级，最后一个施加胜

因此，检查你的CSS，看看发生了什么。也许你可以将媒体查询移动到样式表的末尾...

如果您仍然遇到问题，请发布一个完整的示例。

来源

2013-02-15 10:55:40 TheBronx

我会反对使用！important。真正有利于他的是CSS的彻底扫描，以消除多余的属性。 – Frisbetarian 2013-02-15 11:12:20

是的，当CSS编码良好时，不需要使用“！important”。但是，由于我们没有完整的CSS，“解决”它的最简单方法是增加“重要”。我已经添加了关于规则优先级的一些信息，以便他可以找到问题。我会添加警告，以免他认为“重要”是最好的解决方案。 – TheBronx 2013-02-15 11:15:55

我确实尝试了！重要的INSIDE媒体查询，但它没有奏效。 – DextrousDave 2013-02-15 12:27:36

检查您是否有同一项目的多个呼叫。这就是我发生的事情。他们都堆叠在一起，并创造了一个坚实的项目！

来源

2014-08-11 05:13:47 SameProblem

这适合作为评论而不是回答。 – 2014-08-11 05:32:41

不透明度在媒体查询

回答

相关问题