今天學(xué)到的CSS最新技術(shù)(與圖片背景相關(guān))

2024-07-11 08:29:16

字體：大中小

供稿：網(wǎng)友

background：image-set（）

css4-images規(guī)范中的image-set可以實(shí)現(xiàn)Retina屏幕下圖片顯示，主要用以解決蘋果Retina屏幕對(duì)設(shè)計(jì)造成的挑戰(zhàn)。

在不支持image-set的瀏覽器下，他會(huì)支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；支持image-set：如果你的瀏覽器支持image-sete，而且是普通顯屏下，此時(shí)瀏覽器會(huì)選擇image-set中的@1x背景圖像；Retina屏幕下的image-set：如果你的瀏覽器支持image-set，而且是在Retina屏幕下，此時(shí)瀏覽器會(huì)選擇image-set中的@2x背景圖像。

　　注：目前image-set只能使用webkit瀏覽器的私有屬性“-webkit”在“Safari6”和“Chrome21”下運(yùn)行。IOS 6也可以得到支持。不過很遺憾的是，目前別的瀏覽器還是不支持image-set,現(xiàn)在他僅是CSS4的一個(gè)草案，使用時(shí)應(yīng)注意。

background：element（）

-moz-element()：對(duì)于background-image的擴(kuò)展，允許使用任何其他元素作為當(dāng)前元素的背景。使用方法如下：

復(fù)制代碼

代碼如下:
<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+才支持，其他瀏覽器還不支持，請(qǐng)慎用！

background：canvas（）

　　使用生成的canvas作為元素的背景。使用方法：

復(fù)制代碼

代碼如下:
<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>

效果：