今天學到的CSS最新技術

來源:互聯網
上載者:User
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的一個草案,使用時應注意。

相關文章:

image-set實現Retina螢幕片顯示

W3C相關規範

Webket項目最近新增了對CSS第四級image-set規範的支援

 

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屬性只有firefox4+才支援,其他瀏覽器還不支援,請慎用!

相關文章:

Firefox 4 Beta 9 開發人員特性

MDN相關

例子

  W3C相關規範

 

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

CANVAS-DRIVEN BACKGROUND IMAGES

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.