`

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

    博客分类:
  • css
 
阅读更多
<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.csdn.net/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

分享到:
评论

相关推荐

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`&lt;div&gt;`元素是一...

    css3半透明遮罩背景lightbox图片展示特效

    在“css3半透明遮罩背景lightbox图片展示特效”中,我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件,通常被称为Lightbox。Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会...

    CSS 背景渐变

    CSS 设计指南学习小结

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先,我们要理解`&lt;div&gt;`元素。`&lt;div&gt;`是“division”的缩写,代表一个区域或区块,在HTML中用于组合其他元素,是构建网页布局的基础。通过设置`&lt;div&gt;`...

    css+div圆角窗口

    创建圆角窗口时,可能还需要用到其他的CSS3特性,如阴影(`box-shadow`)、渐变(`linear-gradient`或`radial-gradient`)、背景裁剪(`background-clip`)等,以增加视觉效果。 5. **响应式设计**: 在移动优先...

    css3实现一个div设置多张背景图片及background-image属性实例演示

    在这个例子中,`&lt;url1&gt;` 和 `&lt;url2&gt;` 分别代表两张背景图片的URL,而 `&lt;linear-gradient&gt;` 和 `&lt;radial-gradient&gt;` 用于创建渐变背景。需要注意的是,多个背景图片按照声明的顺序叠加,最上面的图片位于最底层,而...

    div css圆角代码各种圆角表格_圆角边框css圆角

    在网页设计中,`div` 和 `CSS` 是不可或缺的部分,尤其当涉及到界面美观和用户体验时,圆角设计显得尤为重要。圆角边框不仅能够使网页元素看起来更加柔和,还能提升整体设计的现代感。本篇文章将深入探讨如何使用 `...

    使得IE支持CSS3 圆角阴影 渐变

    使得IE支持CSS3 圆角阴影 渐变

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    css+div漂亮的圆角tab选项卡

    最后,`images`文件夹可能包含了用于装饰或功能的图像资源,例如背景图片或图标。在CSS中,可以使用`background-image`属性将这些图片应用到元素上,以增强视觉效果。 综上所述,创建"css+div漂亮的圆角tab选项卡...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    例如,可以为背景添加渐变阴影: ```css body { background-color: #f0f0f0; transition: background-color 0.5s ease; } body.shaded { background-color: rgba(0, 0, 0, 0.5); } ``` 然后,使用jQuery切换类...

    div+css垂直居中和水平居中

    在网页设计中,实现元素的垂直居中和水平居中是一项常见的需求,这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的...

    纯div+css轮播图片切换图片

    在网页设计中,纯div+css实现的图片轮播是一种常见的动态效果,它能为网站增添生动性,吸引用户注意力。下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...

    CSS圆角有立体感的DIV边框

    CSS圆角有立体感的DIV边框! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    CSS3实现圆角阴影渐变效果兼容IE等浏览器

    在现代网页设计中,CSS3已经成为了不可或缺的一部分,它提供了许多增强视觉效果的功能,比如圆角、阴影和渐变。本文将深入探讨如何利用CSS3实现圆角、阴影和渐变效果,并确保这些效果在包括IE在内的主流浏览器中都能...

    DIV始终居中的半透明弹出层

    在网页设计中,"DIV始终居中的半透明弹出层"是一种常见的用户界面元素,用于显示重要的信息或者交互,如提示、警告、登录框等。本文将深入探讨如何实现这样的功能,包括HTML结构、CSS样式以及可能涉及的JavaScript...

    JS封装DIV圆角Css样式

    JavaScript(JS)虽然主要负责动态交互,但在某些情况下,可以用于辅助实现CSS样式,例如封装DIV圆角样式。本文将深入探讨如何使用JS来封装和应用CSS圆角效果,并通过提供的压缩包文件中的示例进行解析。 首先,让...

    网页特效 | 纯CSS控制DIV背景透明效果

    纯CSS控制DIV背景透明效果,没有什么好解释的,代码全在文件里面,直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b,前两位为16进制透明度, 比如说值是上面用到的...

    DIV+CSS水平垂直居中

    DIV+CSS 水平垂直居中网页学习 DIV+CSS 水平垂直居中是Web开发中一个常见的问题,如何将DIV元素水平垂直居中是一个非常重要的知识点。本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:...

    DIV+CSS 圆角边框

    这些示例可能包含了不同形状和大小的圆角,以及如何将圆角边框与其他CSS属性(如背景色、边框宽度和颜色)结合使用的实践。开发者可以通过查看和分析这些代码来学习和理解如何在实际项目中应用`border-radius`。 `...

Global site tag (gtag.js) - Google Analytics