배경 투명한 이미지로 인해 텍스트가 추악하고 읽기 어려워 짐 - CSS

Question

투명도가있는 배경 커버 이미지를 사용하면 내 상단 탐색 메뉴 링크 텍스트가 더럽고 읽기 어려워집니다. 나는 그것을 어떻게 만들 수 있습니까?

HTML -

<div id="wrapper"> <!-- wrapper starts here --> 
    <div id="header"> <!-- header starts here --> 
     <h1>example.com</h1> 
    </div> <!-- header ends here --> 
    <div id="top_nav"> <!-- nav starts here --> 
     <ul> 
      <li><a href="javascript:void(0)">Menu 1</a></li> 
      <li><a href="javascript:void(0)">Menu 2</a></li> 
      <li><a href="javascript:void(0)">Menu 3</a></li> 
      <li><a href="javascript:void(0)">Menu 4</a></li> 
      <li><a href="javascript:void(0)">Menu 5</a></li> 
     </ul> 
    <div class="clr"></div> 
    </div> <!-- nav ends here --> 
    <div style="height:1000px;"></div> 
</div> 

CSS -

html 
{ 
    background:url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat center center fixed; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
} 

#wrapper 
{ 
    width:980px; 
    margin:0 auto; 
    background-color:#FFFFFF; 
    background-color:rgba(255, 255, 255, 0.7); 
} 

#top_nav 
{ 
    width:100%; 
    background-color:#3079ED; 
    position:relative; 
} 

#top_nav ul 
{ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
} 

#top_nav ul li 
{ 
    float:left; 
} 

#top_nav ul li a 
{ 
    background-color:#3079ED; 
    display:block; 
    text-align:center; 
    text-decoration:none; 
    padding:8px 16px; 
    color:#FFFFFF; 
    font-size:14px; 
    border-right:1px solid #6199DF; 
} 

#top_nav ul li:last-child a 
{ 
    border-right:none; 
} 

#top_nav ul li a:hover 
{ 
    background-color:#6199DF; 
} 

그래서 배경 이미지 투명성을 유지하는 동안 일반 텍스트로 내 메뉴 링크 텍스트가 깨끗하고 읽기 쉽게 만들 수있는 방법을 말해주십시오.

여기 DEMO

Answer 1

이 다시 읽고 당신의 주요 문제는 당신이 배경을 수행하는 선택 방법입니다 참조하고, CSS는 정상적으로 말한대로 바 가로 질러 연장하지 않습니다. 이러한 수정을 시도하십시오. #topnav에서

{}

width: 100%; 

아래 높이 인 0 픽셀이 짧은 메뉴 바 오류를 일으키는

height: 32px; 

추가. 또한 제거 할 수 있습니다

position:relative; 

이 경우 이미 가정합니다.

또한

background-color:rgba(75, 75, 75, 0.45); 

에

background-color:rgba(255, 255, 255, 0.7); 

에서 래퍼의 배경을 변경 것이며, 이것은 어두운의 절반 이상으로 구성 배경에서 더 잘 할 경향이

h1 
{ 
color: #fff; 
text-shadow: 2px 2px #000; 
} 

추가 톤.

짧은 탐색 막대 문제를 수정하고 모든 것을 더 읽기 쉽게 만들어야합니다. 뿐만 아니라 당신의 배경을 잘 보여줄 수 있습니다.

DEMO