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. macOS Sierra 10.12版本 显示隐藏文件

    1.显示隐藏文件 打开Terminal 输入:defaults write com.apple.finder AppleShowAllFiles -bool true 再输入: killall Fin ...

  2. centos Linux系统日常管理1 cpuinfo cpu核数 命令 w, vmstat, uptime ,top ,kill ,ps ,free,netstat ,sar, ulimit ,lsof ,pidof 第十四节课

    centos Linux系统日常管理1  cpuinfo cpu核数   命令 w, vmstat, uptime ,top ,kill ,ps ,free,netstat ,sar, ulimit ...

  3. 003-and design-在create-react-app项目中使用antd

    一.概述 create-react-app 是业界最优秀的 React 应用开发工具之一,本文会尝试在 create-react-app 创建的工程中使用 antd 组件,并自定义 webpack 的 ...

  4. C#使用Gzip解压缩完整读取网页内容

    using System; using System.Threading; using System.Text; using System.Text.RegularExpressions; using ...

  5. Cocos2d-JS实现的打飞机

    一.前言 今天我们来讲一个最最最常见的一个小游戏--打飞机!是的,打飞机!还记得小时候在玩儿的雷电,应该是打飞机最早的样子了吧.直到现在,也有微信打飞机,全民飞机大战,全民打飞机等游戏的出现,这些游戏 ...

  6. 2.1 The Object Model -- Classes and Instances（类和实例）

    一.Defining Classes(定义类) 1. 定义一个新的Ember类,调用Ember.Object上的extend()方法: example:定义了一个含有say()方法的新的Person类 ...

  7. ssm所需要的pom（jre8、tomcat8、spring4）

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  8. uva11020 set

    有n个人,每个人有两个属性x,y.如果对于一个人P(x,y) 不存在另外一个人(x',y') 使得x'<x,y'<=y 或者 x'<=x,y'<y 我们说p是有优势的,每次给出 ...

  9. sysctl.conf文件详解

    本文转自:http://www.cnblogs.com/Rosanna/p/3446557.html 使文件立刻生效命令:/sbin/sysctl -p /proc/sys目录下存放着大多数内核参数, ...

  10. STM32|4-20mA输出电路（转）

    源:STM32|4-20mA输出电路 STM32+运算放大器实现VI转换,4mA-20mA发送器