css背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变

最新推荐文章于 2022-08-01 13:01:45 发布

iteye_15971

最新推荐文章于 2022-08-01 13:01:45 发布

阅读量481

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： php

本文链接：https://blog.youkuaiyun.com/iteye_15971/article/details/82404435

css 专栏收录该内容

2 篇文章

订阅专栏

本文展示了一段使用CSS进行网页布局的代码示例，包括背景设置、阴影效果、渐变背景等高级特性，旨在帮助开发者理解并应用CSS在实际项目中的布局与美化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS test</title>
    <style type="text/css">
        body
        {
            margin: 0; /*背景图片固定居中
            http://www.w3school.com.cn/css/pr_background-position.asp
            http://www.198484.com/?action=show&id=51
            */
            background-image: url('images/bg1.jpg');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
        }
        #header
        {
        }
        #inner-header
        {
            margin: 0 auto;
            width: 960px;
            background-color: Gray;
            height: 80px; /*布局块阴影，如果不想支持低版本IE可去掉滤镜
            http://blog.imbolo.com/cross-browsers-css-shadow/
            */
            box-shadow: 3px 3px 4px #000;
            -moz-box-shadow: 3px 3px 4px #000;
            -webkit-box-shadow: 3px 3px 4px #000;
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        }
        #main
        {
            background-color: Gray;
            margin: 10 auto;
            width: 960px;
            min-height: 500px;
            height: auto; /*
            背景半透明
            http://blog.youkuaiyun.com/zenwong/archive/2008/08/29/2846546.aspx
            */
            filter: alpha(opacity=70); /*IE*/
            -moz-opacity: 0.7; /*Mozilla*/
            opacity: 0.7; /*FF*/ /*
            圆角效果，不考虑低版本IE
            http://blog.imbolo.com/creating-rounded-corners-with-css/
            */
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
        }
        #footer
        {
            margin: 0 auto;
            width: 960px;
            height: 100px; /*渐变效果
            http://www.zhangxinxu.com/wordpress/?p=743
            */
            filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
            -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); /*IE8*/
            background-color: Gray; /* 一些不支持背景渐变的浏览器 */
            background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
            background: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
        }
    </style>
    <!--[if IE]>
    <style type="text/css">
        #main
        {
            height: 500px;
        }
        body
        {
            text-align:center;
        }
        #inner-header
        {
        text-align:left;
        }
    </style>
    <![endif]-->
</head>
<body>
    <div id="header">
        <div id="inner-header">
            <h1>
                CSS Demo</h1>
        </div>
    </div>
    <div id="main">
    </div>
    <div id="footer">
    </div>
</body>
</html>

转自：http://www.cnblogs.com/onlytiancai/archive/2011/04/23/2025728.html