배경색 및 이미지 오버레이

배경 이미지 위에 배경색 (파란색)을 중첩하려고합니다. 배경색 위에 표시 할 메뉴가 있습니다. z-index 속성을 사용해 보았지만 나에게 적합하지 않습니다. 나는 그것이 메뉴의 속성과 관련이 있다고 확신하지만, 나는 붙어있다. 다른 div 안에 메뉴를 넣으려고했지만 div 치수를 올바로 지정할 수 없습니다.배경색 및 이미지 오버레이

이것은 내 색인 페이지입니다.

<link rel="stylesheet" type="text/css" href="Practice.css"> 

</head> 

<body background="http://localhost/jim/BatikVilla/Background.jpg"> 

<div id='blue'> 
<div id='cssmenu'> 
<ul> 
<li class='active'><a href='index2.php'>Home</a></li> 
<li class='has-sub '><a href='Product.php'>Products</a> 
    <ul> 
     <li class='has-sub '><a href='Men.php'>Men</a> 
      <ul> 
      <li><a href='Sarong.php'>Sarong</a></li> 
      <li><a href='Shirt.php'>Shirt</a></li> 
    <li><a href='MenSlipper.php'>Slipper</a></li> 
      </ul> 
     </li> 
     <li class='has-sub '><a href='Women.php'>Women</a> 
      <ul> 
      <li><a href='DarGyi.php'>DarGyi</a></li> 
      <li><a href='LongDress.php'>Long Dress</a></li> 
    <li><a href='WomenSlipper.php'>Slipper</a></li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li><a href='About.php'>About</a></li> 
<li><a href='Contact.php'>Contact</a></li> 
</ul> 
</div> 
</div> 


</body> 
</html>

내 CSS 할 수 있다면

<style> 
@charset "UTF-8"; 
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono); 


#blue{ 
height:400px; 
background-color:blue; 
} 

#cssmenu{ 
clear:both; 
float:left; 
margin:0; 
padding:0; 
width:100%; 
background:#fff; 
position:relative; 
} 

div ul { 
float:right; 
list-style: none; 
margin:0; 
padding: 0; 
position: relative; 
right:50%; 
} 
div ul:after { 
content: ""; clear: both; display: block; 
} 
div ul li { 
float: left; 
margin:0 0 0 1px; 
padding:0; 
position:relative; 
left:50%; 
top:1px; 
} 
div ul li:hover { 
background: #4b545f; 
} 
div ul li:hover a { 
color: #fff; 
} 

div ul li a { 
display: block; 
margin:0; 
padding:.6em .5em .4em; 
font-size:1em; 
line-height:1em; 
background:#ddd; 
color: #444; 
text-decoration: none; 
} 

div ul ul { 
display:none; 
position: absolute; 
top: 2em; 
left:0; 
right:auto; 
width:10em; 
} 
div ul li:hover > ul { 
display: block; 
} 

div ul ul li { 
left:auto; 
margin:0; 
clear:left; 
width:100%; 
} 

div ul ul li a { 
padding: 15px 40px; 
color: #fff; 
} 

div ul ul li a:hover { 
background: #4b545f; 
} 

div ul ul ul { 
position: absolute; 
left: 100%; 
top:0; 
}

저를 도와주세요.

출처

2013-04-01 Jimbob

당신이 달성하려고하는지에 조금 더 선명도를 줄 수 있습니까? 그 소리 (그리고 외모)에서, 당신은 당신의 페이지에 배경 이미지를 원하고, 페이지 구조에 파란색 배경을 가진 DIV 요소를 원한다. 그 맞습니까? – Ben

네, 맞습니다. 기본적으로 상자 안의 상자를 상상해보십시오. 바깥 쪽 상자는 페이지이고 그 상자 전체의 배경 이미지는 'x'입니다. 내부 상자에는 배경색 (파란색)이 있습니다. 내부 상자에는 드롭 다운 메뉴가 표시되고, 앞으로는 더 많은 정보가 표시됩니다. DIV 요소를 사용하는 것이 div 요소를 사용하는지 여부를 확인하는 유일한 방법인지는 확실하지 않습니다. 그게 clarifiy 도움이되기를 바랍니다. – Jimbob

좋아, 상당히 간단하게 들린다. 나는 대답을 게시하고 거기에서 계속할 수 있습니다. – Ben

당신을 도울 수 있기를 바랍니다. 이 CSS 사용해보기 :

#blue{ 
    position: absolute; 
    /*left: 0; top:0; bottom:0; right :0;*//* For FULL SCREEN OVERLAY */ 
    left: 5px; top:5px; right :5px;/* SCREEN OVERLAY w/ 5px Margin */ 
    height:400px; 
    background-color: rgba(0, 0, 225, 0.6);  
}

그리고 요소 ID : blue 내부에 내용을 추가 할 수 있습니다. 여기

데모 : http://jsfiddle.net/Tv97Y/

출처

2013-04-01 04:15:11 Fredy

이것은 OP를위한 완벽한 빠른 수정입니다. 죄송합니다. 당신에게 완전한 재 작성을 제공 할 수 없었습니다. ** Jimbob **; 약 1 시간 동안 전화가 끊겼습니다. 받은 편지함에 대한 자세한 정보가 필요하면 알려주십시오. – Ben

고마워, 그것은 바이올린에서 작동하지만, 그것은 여전히 내 컴퓨터에서 작동하지 않는 몇 가지 이유가 나타납니다. 배경색 메뉴 뒤에 가로 막대가 생깁니다. Linux Ubuntu 12.04와 Firefox 18.0.1을 사용하고 있습니다. 이것이 중요한지 모르겠다. 어떤 아이디어? – Jimbob

@ Jimbob : openSuse 11과 Firefox 3.6.2 및 Firefox 18을 사용합니다. 모두 올바르게 표시됩니다. 코딩을 확인하면 닫히지 않은 태그가있을 수 있습니다. – Fredy

배경색 및 이미지 오버레이

답변

관련 문제