元素背景透明/绝对居中 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body {
    background: url(http://f.hiphotos.baidu.com/image/h%3D1200%3Bcrop%3D0%2C0%2C1920%2C1200/sign=7e4bfd7ff01fbe09035ec7165b503750/b219ebc4b74543a987a638c51c178a82b901147d.jpg) top center repeat;
    height:5000px;
}
.wrapper {
    font-family: Microsoft Yahei;
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
    
    /*背景透明方案*/
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#44000000', endColorstr='#44000000');
    background: rgba(0,0,0,.6);
    /*背景透明方案end*/
    
    /*绝对居中*/
    width: 600px;
    height: 530px;
    margin-top: -300px;/*元素宽度的一半*/
    margin-left: -265px;/*元素高度的一半*/
    position: fixed;/* 这里使用fixed 是相对于浏览器窗口居中，如果需要相对于某个容器，则需要设置为absolute，且父元素记得要设置成relative*/
    top: 50%;
    left: 50%;
    /*绝对居中end*/
    
    
}
.wrapper p {
    padding: 50px;
}
</style>
</head>

<body>
<div class="wrapper">
  <p>背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明背景透明</p>
</div>
</body>
</html>

描述都写在代码里面了，多余的废话就不必说了

posted @ 2014-01-03 11:42  雪红幽殇  阅读(188)  评论(0)  编辑  收藏  举报