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. App 组件化/模块化之路——如何封装网络请求框架

    App 组件化/模块化之路——如何封装网络请求框架 在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...

  2. gulp环境搭建

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:它不仅对网站资源进行优化,而且在开发过程中很多重复的任务,他可以通过明确的工具自动完成,使用它我们不仅可以很愉快的编写代码 ...

  3. Unity3D Image 组件附入图片问题

    作为新手经常会看到有个Image的组件 代码中理所当然的public 发现图片并不能附入其中, 解决办法直接 public Sprite 就可以了

  4. jsp函数的使用

    在这篇博客里面谈一谈jsp函数的一些使用规则 1.在jsp里面,函数和类是等价的,因为在函数的内部可以定义函数和变量.定义在函数内的函数和变量分为实例属性.实例函数.类属性.类函数.实例和类是面向对象 ...

  5. 初学 Python（十二）——高阶函数

    初学 Python(十二)--高阶函数 初学 Python,主要整理一些学习到的知识点,这次是高阶函数. #-*- coding:utf-8 -*- ''''' 话说高阶函数: 能用函数作为参数的函数 ...

  6. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  7. 从Ubunt的安装到hadoop集群的搭建

    一.相关基础配置 1.网络设置 a.调整VMnet8这块网卡网关 b.在VMware[编辑]->[虚拟网络编辑器]对VMnet8进线[NAT 设置] c.调整[DHCP 设置]中的起始IP地址 ...

  8. javascript编程解决黑化的牛牛问题

    问题描述 时间限制:1秒 空间限制:32768K 牛牛变得黑化了,想要摧毁掉地球.但他忘记了开启地球毁灭器的密码.牛牛手里有一个字符串S,牛牛还记得从S中去掉一个字符就恰好是正确的密码,请你帮牛牛求出 ...

  9. 如何在github制作一个网页

    1.首先得先注册一个github账号,官网:https://github.com/ 2.注册完,登录账号进入首页,点右上角的 ‘+’ 创建新的仓库 3. 点击setting,选择一个主题, 4. 选完 ...

  10. 关于戴尔没有活动分区，遇到了“Windows安装程序无法将windows配置为在此计算机的硬件上运行”提示等

    虽然只有几句话,但是还是超级好用的 装过很多戴尔的笔记本,发现很多都是这里的问题导致系统装不进去. 1.硬盘设置有问题.进BIOS ,到SATA 设置看看硬盘是不是设置为AHCI了.这个ghost系统 ...