今日学到的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>

实际效果: