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. Feed系统架构资料收集（转）

    add by zhj:有些链接已经失效,后续会修改. 原文:http://blog.csdn.net/zhangzhaokun/article/details/7834797 完全用nosql轻松打造 ...

  2. （2.1）DDL增强功能-数据类型、同义词、分区表

    1.数据类型 (1)常用数据类型 1.整数类型 int 存储范围是-2,147,483,648到2,147,483,647之间的整数,主键列常设置此类型. (每个数值占用 4字节) smallint ...

  3. 设置XShell快捷键 复制粘贴 并禁用智能选择

    设置XShell快捷键 复制粘贴 并禁用智能选择 1打开选项 2键盘和鼠标->打开编辑 3新建 组合键 Ctrl+C 类型:菜单 ->操作 [编辑]复制  [编辑]粘贴 4选中 ctrl+ ...

  4. github使用方法

    1:fork别人的项目后,更新别人最新的提交 https://blog.csdn.net/qq1332479771/article/details/56087333 2:在idea中push工程    ...

  5. spark2.1.1创建Pipeline

    Pipeline 为流程,是Spark创建机器学习的一个流程控制的类 下面直接贴出创建的代码,以及整个流程 第一种: import org.apache.spark.ml.{Pipeline, Pip ...

  6. 感知机PLA算法实现[转载]

    转自:https://blog.csdn.net/u010626937/article/details/72896144#commentBox 1.实现原始形式 import numpy as np ...

  7. jsoup做http接口测试

    本文转载张飞的博客http://www.cnblogs.com/zhangfei/p/4359408.html在此感谢博主的分享! 最早用Jsoup是有一个小的爬虫应用要写,发现Jsoup较HttpC ...

  8. wordpress防止网站被镜像四个方法

    第一种:拆分域名链接与镜像站比对,然后用img标签src空值触发onerror来执行js比对,比对失败则跳转回源站.代码如下:(复制粘贴到主题的functions.php最后一个?>之前,代码出 ...

  9. SQL Server与Oracle对表添加列的不同点

    逛了博客园两年有余,不知道该发表些什么.要么觉得自己太菜,要么觉得要发的内容都可以搜索到,发表了还颇有抄袭味道.想想后都不得了之了. 搞了开发快一年了,有时候零零碎碎的东西需要整理一下,梳理后才能做到 ...

  10. VS2010/MFC编程入门之二十五（常用控件：组合框控件Combo Box）

    上一节鸡啄米讲了列表框控件ListBox的使用,本节主要讲解组合框控件Combo Box.组合框同样相当常见,例如,在Windows系统的控制面板上设置语言或位置时,有很多选项,用来进行选择的控件就是 ...