[英]Overlay background color and image
I am trying to overlay a background color (blue) on top of a background image. 我正在尝试在背景图像上覆盖背景色(蓝色)。 I have a menu that I want to appear above the background color. 我有一个想要显示在背景颜色上方的菜单。 I've tried using the z-index property, but it is not working for me. 我尝试使用z-index属性,但是它不适用于我。 I'm sure it has something to do with the properties of the menu, but I'm stuck. 我确定它与菜单的属性有关,但是我被卡住了。 I've tried putting the menu inside of another div, but I can't get the div dimensions correct. 我尝试将菜单放入另一个div内,但无法正确获得div尺寸。
This is my index page. 这是我的索引页面。
<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>
and my CSS 和我的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;
}
Please help me if you can. 如果可以,请你帮助我。
I hope can help you. 希望能对您有所帮助。 Try this css : 试试这个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);
}
And you can add contents inside element ID : blue. 您可以在元素ID内添加内容:蓝色。
Here the demo : http://jsfiddle.net/Tv97Y/ 这里的演示: http : //jsfiddle.net/Tv97Y/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.