IE8에서 반투명 배경색으로 드롭 다운 메뉴를 만드는 방법은 무엇입니까?

배경색이 반투명 인 드롭 다운 메뉴를 만들려고합니다. IE8을 제외한 모든 브라우저에서 정상적으로 작동합니다.IE8에서 반투명 배경색으로 드롭 다운 메뉴를 만드는 방법은 무엇입니까?

메뉴가 다음과 같은 필터를 사용하여 반투명이면 더보기는하지만 드롭 다운 메뉴는 표시되지 않습니다. 이 문제를 해결하기 위해 메뉴의 배경색을 흰색으로했습니다.

배경을 반 투명하게 만들 수 있으며 드롭 다운 메뉴가 IE8에서 계속 작동합니까?

필터

 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#CCffffff,EndColorStr=#CCffffff); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#CCffffff,EndColorStr=#CCffffff)";

HTML

<!--[if lt IE 9]> 
<style type="text/css"> 
.inner { background-color: #fff !important 
} 
#menu li ul { background-color: #fff; 
} 
</style> 
<![endif]--> 

<header> 
<div class="inner"> 
    <nav> 
    <ul id="menu"> 
    <li><a href="#">menu1</a></li>  
    <li><a href="#">menu2</a> 
<ul class="sub-menu"> 
     <li> <a href="#">submenu_1</a> </li> 
     <li> <a href="#">submenu_2</a> </li> 
     <li> <a href="#">submenu_3</a> </li> 
     </ul> </li> 
     <li><a href="greeting.html">menu4</a> </li> 
    <li><a href="greeting.html">menu5</a> 
    </li> 
    </ul> 
</nav> 
    </div> 
</header>

CSS는

.inner { 
margin: 0 auto; 
z-index: 999; 
background-color: rgba(255,255,255,0.9); 
position: fixed; 
left: 1%; 
width: 100%; 
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); 
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff)"; 
} 

#menu { 
margin-top: 31px; 
margin-left: 15%; 
float: left; 
width: 70%; 
} 

#menu li { 
text-align: center; 
margin-left: 60px; 
display: inline-block; 
float: left; 
height: 50px; 
} 

#menu li:hover > ul { 
display: block; 
} 

#menu li > a { 
    cursor: pointer; 
    display: block; 
    text-decoration: none; 
    position: relative; 
    top: -20px; 
    height: 50px; 
} 

#menu li ul { 
display: none; 
position: absolute; 
background-color: rgba(255,255,255,0.9); 
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); 
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff)"; 
left: 0; 
top: 100%; 
width: 100%; 
z-index: 2000; 
} 

#menu li:hover ul.sub-menu { 
display: block; 
} 


#menu li ul.sub-menu li { 
float: none; 
margin-left: 0px; 
width: 130px; 
height: auto; 
padding: 0; 

} 

#menu li ul.sub-menu { 
display: none; 
position: absolute; 
width: 130px; 
padding-left: 0; 
    left: 430px; 
}

어떤 도움을 이해할 수있을 것이다. 제 질문을 읽어 주셔서 감사합니다.

출처

2016-06-27 mai_h

컷 10 * 10 'png' 이미지를 제공하고 반복 배경 - image''로 사용

세부 사항. –

의견을 보내 주셔서 감사합니다. –

필터 16 진 코드가 올바르지 않습니다.

육각 코드의 시작에서 두 문자는

rgba(255, 255, 255, 0.5)이 (startColorstr=#80FFFFFF,endColorstr=#80FFFFFF)

00이 투명하고 FF 불투명에 해당하는 것 불투명도를 나타낸다.

100% — FF 
95% — F2 
90% — E6 
85% — D9 
80% — CC 
75% — BF 
70% — B3 
65% — A6 
60% — 99 
55% — 8C 
50% — 80 
45% — 73 
40% — 66 
35% — 59 
30% — 4D 
25% — 40 
20% — 33 
15% — 26 
10% — 1A 
5% — 0D 
0% — 00

그래서이 : background-color: rgba(255,255,255,0.9);

은 동일합니다 : 여기에 전체지도의 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#E6ffffff,EndColorStr=#E6ffffff);

이것은 당신의 <head> consitional 스타일에 있어야는 하지 그것은 또한에 background:none;를 필요에 따라 기본 CSS 시트 에 쓰이는.

참고 IE8이 없으므로 테스트 할 수 없습니다. CSS Tricks

출처

2016-06-27 12:02:26

귀하의 조언과 목록에 감사드립니다. 필터 16 진수 코드는 IE8의 기본 CSS 에서처럼 제대로 작동하여 풀다운 메뉴의 문제는 무시했습니다. 그러나 어쨌든, 나는 올바른 코드를 작성하는 데주의를 기울일 것입니다. 고맙습니다! –

IE8에서 반투명 배경색으로 드롭 다운 메뉴를 만드는 방법은 무엇입니까?

답변

관련 문제