今日学到的CSS全新技术性(与照片情况有关)

日期：2021-01-20 类型：科技新闻 

关键词：h5互动游戏，微信h5怎么制作，h5转盘抽奖，h5测试制作，凡科H5

background：image-set（）

      css4-images标准中的image-set能够完成Retina显示屏下照片显示信息，关键用以处理iPhoneRetina显示屏对设计方案导致的挑戰。

在不适用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的1个草案，应用时应留意。


 background：element（）

     -moz-element()：针对background-image的拓展，容许应用任何等他元素做为当今元素的情况。应用方式以下：

拷贝编码
编码以下:

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

<div style="overflow:hidden; height:0;">
<button id="myBackground2" type="button">Evil button!</button>
</div>

实际效果：

　　注：现阶段该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>

实际效果：

上一篇：纯CSS3撰写的的精致动漫进度条(无flash/无图象/无 返回下一篇：没有了