Html 覆盖背景颜色和图像_Html_Css_Menu_Overlay

Html 覆盖背景颜色和图像

html css menu

Html 覆盖背景颜色和图像,html,css,menu,overlay,Html,Css,Menu,Overlay,我试图在背景图像的顶部覆盖背景色（蓝色）。我有一个菜单，我想出现在背景色上方。我尝试过使用z-index属性，但它对我不起作用。我肯定这和菜单的属性有关，但我被卡住了。我试着把菜单放在另一个div里面，但是我不能得到正确的div尺寸 <link rel="stylesheet" type="text/css" href="Practice.css"> </head> <body background="http://localhost/jim/BatikVil

我试图在背景图像的顶部覆盖背景色（蓝色）。我有一个菜单，我想出现在背景色上方。我尝试过使用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>

这是我的索引页。

<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

<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>

<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;
}


@字符集“UTF-8”；
@导入url(http://fonts.googleapis.com/css?family=Oxygen+单声道）；
#蓝色的{
高度：400px；
背景颜色：蓝色；
}
#cssmenu{
明确：两者皆有；
浮动：左；
保证金：0；
填充：0；
宽度：100%；
背景：#fff；
位置：相对位置；
}
迪沃{
浮动：对；
列表样式：无；
保证金：0；
填充：0；
位置：相对位置；
右：50%；
}
分区ul：之后{
内容：；清除：两者；显示：块；
}
李迪夫{
浮动：左；
利润率：0.1px；
填充：0；
位置：相对位置；
左：50%；
顶部：1px；
}
李迪文：悬停{
背景：#4b545f；
}
李处长：悬停a{
颜色：#fff；
}
李亚迪{
显示：块；
保证金：0；
填充物：6em.5em.4em；
字号：1em；
线高：1米；
背景：ddd；
颜色：#444；
文字装饰：无；
}
迪乌尔{
显示：无；
位置：绝对位置；
顶部：2米；
左：0；
右：自动；
宽度：10em；
}
div ul li:悬停>ul{
显示：块；
}
李迪夫{
左：自动；
保证金：0；
清除：左；
宽度：100%；
}
李丽亚分区{
填充：15px 40px；
颜色：#fff；
}   
div ul li a:悬停{
背景：#4b545f；
}
部门{
位置：绝对位置；
左：100%；
排名：0；
}

如果可以，请帮助我。

我希望能帮助你。试试这个css：

<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>

#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中添加内容

<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>

这里是演示：

您是否能够更清楚地了解您想要实现的目标？从它的声音（和外观）来看，您希望在页面上有一个背景图像，然后在页面结构中有一个蓝色背景的DIV元素。对吗？对，对。基本上，想象一个盒子里有一个盒子。外部框是页面，整个框的背景图像是“x”。内框有一个背景色（蓝色）。内部框还会显示一个下拉菜单，将来可能还会显示更多。我不确定使用DIV元素是否是实现它的唯一方法，但可以肯定的是，使用DIV元素。我希望这有助于澄清。好的，听起来很简单。我将发布一个答案，我们可以从那里继续。只需确保下拉菜单保持原样，并居中即可。我取得了一些进步，但这是以牺牲我的菜单为代价的。提前谢谢。我正在重写您从头开始提供的整个代码片段，以帮助清理它并向您解释一些事情。当我这样做的时候，你是否能够提供一些像截图这样的东西来描述你正在尝试做的事情（包括菜单位置等）？只要简单的盒子就可以了——你可以使用www.tinypic.com这样的服务轻松上传编辑：不用担心解释子菜单，只是一个框，用于导航无序列表相对于父元素应该在哪里。这是OP的完美快速修复。很抱歉，我无法为您提供完整的重写，Jimbob；我被叫走了大约一个小时。如果你需要更多关于这个的信息，请发邮件给我。谢谢，我看到它在fiddle中工作，但由于某些原因，它在我的电脑上仍然无法工作。我仍然得到一个背景色菜单后面的水平条。我正在使用Linux Ubuntu 12.04和Firefox 18.0.1。我不知道这是否重要。有什么想法吗？@Jimbob:我使用openSuse 11、Firefox 3.6.2和Firefox 18，它们都显示正确。尝试检查您的编码，可能有尚未关闭的标记。

<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>