`

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;`元素是一...

    DIV+CSS上下左右绝对居中

    在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等)

    CSS3的`linear-gradient`函数允许我们创建线性渐变背景。例如,从左至右的红色到蓝色渐变: ```css .gradient-div { background: linear-gradient(to right, red, blue); } ``` 对于多行文本的`div`,我们可能...

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

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

    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文字阴影的一个效果

    在这个例子中,阴影向右下角偏移了2像素,具有3像素的模糊半径,颜色为半透明的黑色(50%的透明度)。 为了更好地理解并实践这个效果,我们可以创建一个&lt;div&gt;元素,并为其应用上述样式: ```html &lt;!DOCTYPE html&gt; ...

    div+css呈现圆角层示例

    在这个特定的案例"div+css呈现圆角层示例"中,我们将探讨如何利用CSS技术创建具有圆角边框的`div`层,而无需依赖背景图片。这种技术对于提升网页的可读性和美观性至关重要,因为它可以减少HTTP请求,提高页面加载...

    div+css实现div的多层重叠,并且居中显示

    我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学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例子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轮播图片切换图片

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

    纯CSS实现不固定大小div相对于body垂直居中效果

    这个可谓是css的高级写法 兼容IE8/IE9/IE10/IE11 火狐,谷歌,360等各种主流浏览器 相对于body居中的另外一种写法 原理比较难以理解,这里只简单的说下如何使用: 1、在body的根目录下建立两个...

    div+css 可伸缩的圆角

    在网页设计中,"div+css 可伸缩的圆角"是一个常见的需求,它涉及到CSS3中的边框半径属性,以及如何构建响应式的布局。让我们深入探讨这个主题。 首先,`div`是HTML中的一种块级元素,通常用于组织页面结构。`div`...

    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进制透明度, 比如说值是上面用到的...

Global site tag (gtag.js) - Google Analytics