今天学到的CSS最新技术(与图片背景相关)


Posted in HTML / CSS onDecember 24, 2012

background:image-set()

      css4-images规范中的image-set可以实现Retina屏幕下图片显示,主要用以解决苹果Retina屏幕对设计造成的挑战。

在不支持image-set的浏览器下,他会支持background-image图像,也就是说不支持image-set的浏览器下,他们解析background-image中的背景图像;支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像;Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像。

:目前image-set只能使用webkit浏览器的私有属性“-webkit”在“Safari6”和“Chrome21”下运行。IOS 6也可以得到支持。不过很遗憾的是,目前别的浏览器还是不支持image-set,现在他仅是CSS4的一个草案,使用时应注意。

今天学到的CSS最新技术(与图片背景相关)
 background:element()

     -moz-element():对于background-image的扩展,允许使用任何其他元素作为当前元素的背景。使用方法如下:

复制代码
代码如下:

<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>


效果:

今天学到的CSS最新技术(与图片背景相关)

:目前该CSS属性只有firefox4+才支持,其他浏览器还不支持,请慎用!

background:canvas()

使用生成的canvas作为元素的背景。使用方法:

复制代码
代码如下:

<html>
<head>
<style>
div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
</style>

<script type="application/x-javascript">
function draw(w, h) {
var ctx = document.getCSSCanvasContext("2d", "squares", w, h);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
</script>
</head>
<body onload="draw(300, 300)">
<div></div>
</body>
</html>


效果:

今天学到的CSS最新技术(与图片背景相关)

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 #HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 #HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 #HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 #HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 #HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 #HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 #HTML / CSS
You might like
PHP新手上路(八)
2006/10/09 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python实现抖音视频批量下载
2018/06/20 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
安全责任书范本
2014/04/15 职场文书
赔偿协议书范本
2014/09/12 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
雨花台导游词
2015/02/06 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
JavaScript实现简单计时器
2021/06/22 Javascript