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. hightcharts在移动端运用 FastClick后苹果上legend点击失效的解决办法

    问题:在移动端做图表运用了hightcharts,引用了fastclick来消除300ms的延迟,但是发现苹果(安卓正常)上hightcharts的legend点击不起作用了,必须长按才行. 使用fa ...

  2. WinForm中AssemblyInfo.cs文件参数具体讲解

    在.NET中有一个配置文件AssemblyInfo.cs主要用来设定生成的有关程序集的常规信息dll文件的一些参数,下面是默认的AssemblyInfo.cs文件的内容具体介绍 //是否符合公共语言规 ...

  3. ServerSocket简单例题

    ServerSocket 简单例题: package com.kaige123.net; /* *凯哥 */ import java.io.FileInputStream; import java.i ...

  4. ES6中的箭头函数

    关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...

  5. GIT - 代码管理工具之命令集

    GIT 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系统提供了高级操作和完全访问.它会把你的每次提交的文件的全部内容都会记录下来. GIT特点 速度 简单的设计 对非线性开发 ...

  6. 【CSS】background 的覆盖

    1. 样式覆盖问题描述 现象:class1 为dom节点默认样式,class2为dom节点后增加样式,发现class2的background 被class1的覆盖 解决办法:在class2 的back ...

  7. MySQL学习笔记(四)：存储引擎的选择

    一:几种常用存储引擎汇总表 二:如何选择 一句话:除非需要InnoDB 不具备的特性,并且没有其他办法替代,否则都应该优先考虑InnoDB:或者,不需要InnoDB的特性,并且其他的引擎更加合适当前情 ...

  8. Json 工具介绍 fastjson gson jackson

    1. fastjson fastjson是一个Java语言编写的高性能功能完善的JSON库.它采用一种“假定有序快速匹配”的算法,把JSON Parse的性能提升到极致, 是目前Java语言中最快的J ...

  9. ajax-jquery方法-初步入门01（整理)

    -----------------------------------2017.07.21写----------------------------------------- 相比较原生javascr ...

  10. uncaught syntaxerror: unexpected token

    今天写飞机大战游戏的js代码时出现uncaught syntaxerror: unexpected token(未捕获的语法错误: 意想不到的非法令牌错误),百度一下并没有解决我的问题...... 这 ...