CSS3全新的背景图片方案

firefox支持指定一个元素的ID将它作为另一个元素的背景-moz-element(#ID)， webkit系支持-webkit-canvas(xxxx)动态创建一个canvas作为它的背景

1.firefox

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    </head>

    <body>

        <h3>firefox4+</h3>

        <div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">

            <p>This box uses the element with the #myBackground1 ID as its background!</p>

        </div>

        <div style="overflow:hidden; height:0;">

            <div id="myBackground1" style="width:1024px; height:1024px; background-image: -moz-linear-gradient(left, red, orange, yellow, white);">

                <p style="-moz-transform-origin:0 0; -moz-transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>

            </div>

        </div>

        <hr/>

        <div style="width:400px; height:100px; background:-moz-element(#myBackground2);">

        </div>

        <div style="overflow:hidden; height:0;">

            <button id="myBackground2" type="button">Evil button!</button>

        </div>

    </body>

</html>

2.webkit,canvas

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style>

            div {

                background: -webkit-canvas(test);

                float:left;

                width: 100px;

                height: 100px;

            }

        </style>

        <script>

            function onLoad() {

                var ctx = document.getCSSCanvasContext("2d", "test", , );

                ctx.fillStyle = "blue";

                ctx.fillRect(, , , )

            }

            document.addEventListener("DOMContentLoaded", onLoad);

        </script>

    </head>

    <body>

        <div>只能运行于webkit系</div>

    </body>

</html>

CSS3全新的背景图片方案的更多相关文章

  1. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  2. CSS3之让背景图片全部显示

    起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-si ...

  3. ☀【CSS3】背景图片

    CSS3全新的背景图片方案http://www.cnblogs.com/rubylouvre/p/3401125.html

  4. 第95天：CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

  5. 让低版本IE支持css3背景图片缩放属性background-size

    IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...

  6. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  7. 3.css3中多个背景图片的用法

    (background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复) <!DOCTYPE htm ...

  8. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  9. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

随机推荐

  1. SpringBoot开启缓存注解

    https://blog.csdn.net/sanjay_f/article/details/47372967 https://www.cnblogs.com/lic309/p/4072848.htm ...

  2. OOP理解

    https://www.cnblogs.com/xiaosongluffy/p/5072501.html OOP是面向对象编程,有几大基础特性.抽象,封装,继承,多态 1:抽象:将世界上的具体事物提取 ...

  3. CentOS7下的YUM源服务器搭建详解，过程写的很详细（转）

    因为近期公司需要搭建一个YUM源服务器给大量的linux(mini)使用,所以因此在网上找了很多的教程,却没有一个特别详细的,很多都有遗漏,参差不齐.所以,打算自己做完之后方便以后查阅,特出此文档. ...

  4. UVA大模拟代码（白书训练计划1）UVA 401,10010,10361,537,409,10878，10815，644，10115，424，10106，465，10494

    白书一:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=64609#overview 注意UVA没有PE之类的,如果PE了显示WA. UVA ...

  5. 模块讲解----反射 (基于web路由的反射)

    一.反射的实际案例: def main(): menu = ''' 1.账户信息 2.还款 3.取款 4.转账 5.账单 ''' menu_dic = { ':account_info, ':repa ...

  6. TFS2015源代码管理器无法建立团队项目的问题

    最近在服务器安装了微软最新版的TFS2015  正版要钱,网络上还没有能找到可用的key,因此我只能使用试用版. 安装完成后,使用我本地的vs2013  vs2012  vs2010  vs2014 ...

  7. MD5—加密，加盐

    MD5的参考盐值:String salt = "212*)()()**()^&UYGbakdkj " ; MD5—加密工具类 package com.demo.tools; ...

  8. java 加密之消息摘要算法

    简介 消息摘要算法的主要特征是加密过程不需要密钥,并且经过加密的数据无法被解密,即单向加密,只有输入相同的明文数据经过相同的消息摘要算法才能得到相同的密文. 消息摘要算法不存在密钥的管理与分发问题,适 ...

  9. Linux 中各个文件夹的作用

    /  根目录 包含了几乎所的文件目录.相当于中央系统.进入的最简单方法是:cd /. /boot  引导程序,内核等存放的目录 这个目录,包括了在引导过程中所必需的文件.在最开始的启动阶段,通过引导程 ...

  10. VS中子对话框的关闭回调函数

    新建了QDialog的子类时,如果需要回调它的关闭函数 1.加入头文件#include <QCloseEvent> 2.重写函数 protected: void closeEvent(QC ...