background-image绘制多张图片叠加，示例如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-image绘制多张图片叠加</title>

    <style>

        div{

            width:1100px;

            height:800px;

            background-image: url("../../image/icon1.jpg"),url("../../image/border3.jpg");

            background-repeat: repeat-x,no-repeat ;

            background-position:100%,100%,center,center;

            border:5px solid #ff0000;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>
background-clip:规定背景的绘制区域：
background-origin:相对于内容框来定位背景图像:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-clip及background-origin属性</title>

    <style>

        /*background-clip:规定背景的绘制区域：*/

        /*background-origin:相对于内容框来定位背景图像：*/

        div{

            background: #fff000;

            font-size: 30px;

            border:10px dashed #0000ff;

            padding:20px;

            background-image: url("../../image/icon.png");

            background-repeat:no-repeat;

        }

        .div2{

            margin-top:30px;

            background-origin: content-box;

            background-clip: content-box;

        }

        .div3{

            margin-top:30px;

            background-origin: border-box;

            background-clip: border-box;

        }

        .div4{

            margin-top:30px;

            background-origin: padding-box;

            background-clip: padding-box;

        }

    </style>

</head>

<body>

<div>这是一段测试文字</div>

<div class="div2">这是一段测试文字</div>

<div class="div3">这是一段测试文字</div>

<div class="div4">这是一段测试文字</div>

</body>

</html>

css3的box-shadow属性:

让ie6、7、8都支持border-radius 、box-shadow、text-shadow的方法:用ie-css3.htc

首先下载ie-css3.htc脚本，然后在css中加入：

它的使用方法是：下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

.box{

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */

-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */

box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc);

}

注意：behavior: url(ie-css3.htc) 中的ie-css3.htc地址用绝对路径或者直接传到网站的根目录下面，要不然可能会看不到效果。

•当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。
•当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px
red; 否则IE中会失效。
•不支持RGBA值中的alpha透明度。
•不支持inset内阴影。
•不支持阴影扩展。

•阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。
但是，这个脚本了仅仅是让IE支持了部份的box-shadow值。

CSS3背景相关样式的更多相关文章

  1. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  2. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  3. 炫酷的CSS3抖动样式:CSS Shake

    CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...

  4. css3-4 css3边框样式

    css3-4 css3边框样式 一.总结 一句话总结: 二.css3边框样式 1.相关知识 边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...

  5. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

  6. CSS3学习系列之背景相关样式（一）

    新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...

  7. CSS3学习系列之背景相关样式（二）

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  8. 一些上流的CSS3图片样式

    直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...

  9. css3常用样式集锦

    控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...

随机推荐

  1. jsPlumb之流程图项目总结及实例

    在使用jsPlumb过程中,所遇到的问题,以及解决方案,文中引用了<数据结构与算法JavaScript描述>的相关图片和一部分代码.截图是有点多,有时比较懒,没有太多的时间去详细的编辑. ...

  2. Eclipse工程有乱码

    处理:把整个工程的“Text file encoding”属性设为GBK,就不会有乱码了.设置方法:在eclipse中右击工程,点击弹出框最下面的“Properties”,然后在弹出的窗口左侧点击“R ...

  3. 如何安装Orchard

    本篇文章主要讲解如何安装Orchard,首先说一下Orchard的安装方式有如下几种: 通过Microsoft WebMatrix(Microsoft Web Platform Installer)安 ...

  4. Linux 教程 技巧集

    Linux 终端操作技巧 CTRL + U - 剪切光标前的内容 CTRL + K - 剪切光标至行末的内容 CTRL + Y - 粘贴 CTRL + E - 移动光标到行末 CTRL + A - 移 ...

  5. ubuntu14.04_CUDA8.0_cudnn5.1_Tensorflow配置

    深度学习框架tensorflow相比与caffe抽象层做的更好,即使用tensorflow的人不需要关心底层的实现,做底层实现的人不需要关心上层的模型和算法;caffe耦合比较紧凑,若想caffe用的 ...

  6. 消息中间件Client模块划分

    上图是之间讨论确定的系统架构(后续内容会按照这个架构来叙述),其中: 客户端包含Producer和Consumer两大块 客户端需要和NameServer交互来获取元数据 客户端需要和Broker交互 ...

  7. EasyUI combobox 中文无法检索最终解决方案！

    写在前面: 因为之前一直用EasyUI的combobox控件,但是苦于在火狐浏览器下输入中文无法直接检索必须在输入完成后再敲击一下键盘才可以(按一下shift或空格),原因是中文输入法屏蔽了EasyU ...

  8. （转）Bat Command

    1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置.语法 echo [{on|off}] [message] Sample篅echo off ...

  9. Spring源码情操陶冶-ContextLoader

    前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-ContextLoaderListener 静态代码块内容 ContextLoader在被主动调用的时候,会执行其的一个静态块,代码 ...

  10. webpack web-dev-server 热加载

    摘要 坑位: 千万不要webpack.config.js 加了HotModuleReplacementPlugin , web-dev-server 也加hot:true 配置, 会出现莫名的错误, ...