CSS3全新的背景图片方案
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全新的背景图片方案的更多相关文章
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- CSS3之让背景图片全部显示
起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-si ...
- ☀【CSS3】背景图片
CSS3全新的背景图片方案http://www.cnblogs.com/rubylouvre/p/3401125.html
- 第95天:CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
- 让低版本IE支持css3背景图片缩放属性background-size
IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...
- CSS3背景图片(多重背景、起始位置、裁剪、尺寸)
一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...
- 3.css3中多个背景图片的用法
(background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复) <!DOCTYPE htm ...
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案
最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...
随机推荐
- conda 管理 python 版本
conda常用命令 查看当前系统下的环境 conda info -e 创建新的环境 # 指定python版本为2.7 conda create -n env_name python=2.7 # 同时安 ...
- java-mybaits-009-mybatis-spring-使用,SqlSessionFactoryBean、事务
一.版本限制 参看地址:http://www.mybatis.org/spring/ 二.使用入门 2.1.pom <dependency> <groupId>org.myba ...
- 101-advanced-React易用性,概述
React完全支持构建可访问的网站,通常使用标准的HTML技术. 1.可访问小部件 ARIA文档包含用于构建完全可访问的JavaScript小部件的技术. JSX完全支持所有aria- * HTML属 ...
- 【转】Deep Learning(深度学习)学习笔记整理系列之(三)
好了,到了这一步,终于可以聊到Deep learning了.上面我们聊到为什么会有Deep learning(让机器自动学习良好的特征,而免去人工选取过程.还有参考人的分层视觉处理系统),我们得到一个 ...
- Transactions and beyond it..
While data integrity is managed very effectively within a single database with row locking, deadlock ...
- 生成TPC-H数据集
下载tpc-h tool 版本有点老,2.14.3,够用了. 在解压的文件夹下面cd到dbgen下,找到makefile.suite. ~/tpch_2_14_3$ cd dbgen~/tpch_2_ ...
- Springmvc的拦截器执行顺序及各方法作用
实现HandlerInterceptor接口或者继承HandlerInterceptor的子类,比如Spring 已经提供的实现了HandlerInterceptor 接口的抽象类HandlerInt ...
- Fiddler 手机无法上网问题
一.Fiddler版本升级后需要升级netframework 二.每一个域名点击需要授权 出现此页面依次点击显示详细信息和访问此网站. 有时候网站白板,可能是cdn域名没有授权的原因,可以直接在url ...
- 20145303刘俊谦《网络对抗》Exp2 后门原理与实践
20145303刘俊谦<网络对抗>Exp2 后门原理与实践 基础问题回答 1.例举你能想到的一个后门进入到你系统中的可能方式? •在网页上浏览不安全的网站或者下载不安全的软件 •通过发送邮 ...
- 20145311 实验一 "Java开发环境的熟悉"
20145311 实验一 "Java开发环境的熟悉" 程序设计过程 实验内容 -实现四则运算,并进行测试 编写代码 1.四则运算就四种运算,我就做了个简单的,输入两个数,然后选择一 ...