Embedded Files
HTML程式碼
HTML程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Opacity</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li><a href="#">Selection</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Vectors</a></li>
<li><a href="#">PSD Files</a></li>
<li><a href="#">Icons</a></li>
</ul>
<h1>Discover our exclusive content</h1>
<img src="banner.jpg" alt="">
</div>
</body>
</html>
CSS程式碼
CSS程式碼
@import url('reset.css');
body{
background-image: url(html_bg.png);
font-family: Verdana, Arial;
padding-top: 50px;
}
.wrapper{
width: 1200px;
margin: 0 auto;
background-color: #333;
position: relative;
}
ul{
position: absolute;
left: 0;
top: 0;
overflow: hidden;
z-index: 10;
background-color: rgba(0,0,0,.5);
}
li{
float: left;
}
a{
display: block;
width: 240px;
line-height: 50px;
color: white;
text-decoration: none;
text-align: center;
font-size: 15px;
}
a:hover{
color: rgba(255,255,255,.5);
}
h1{
font-size: 3em;
color: white;
position: absolute;
top: 300px;
width: 100%;
text-align: center;
z-index: 10;
}
img{
position: absolute;
left: 0;
top: 0;
opacity: .5;
}
Page updated
Google Sites
Report abuse