閱讀448 返回首頁    go 阿裏雲 go 技術社區[雲棲]

精通css（6）-圖像背景那些事兒

1.背景圖像

先說一下background的用法。

通常使用簡寫形式：background：背景色 背景圖 重複方式 定位方式  圖像位置，比如background: #00FF00 url(bgimage.gif) no-repeat fixed top;

background-position有center屬性，可以讓背景居中。

如果使用像素對背景定位，如background-position：20px 20px；位置是從父元素左上角到圖像左上角算的。如果使用百分比，如background-position：20% 20%；

位置則是從圖片上距左上角x,y距離20%的點到父元素左上角來算的。


2.圓角圖像

這裏隻介紹css3中的方法，不支持的瀏覽器就見鬼去吧，大不了看到的是直角。

以前的做法是用圓角圖像填充圖像的四個角，這樣為了一個圓角效果會加很多無意義的東西。用css3的話可以一次添加多個圖像：

{
	background-image: url(top-left.gif),
	                  url(top-right.gif),
	                  url(bottom-left.gif),
	                  url(bottom-right.gif);
	background-repeat: no-repeat,
		           no-repeat,
			   no-repeat,
			   no-repeat;
	background-position: top left,
	       		     top right,
	       		     bottom left,
			     bottom right;				   

}
還可以用border-radius: 

{
	border-radius: 5%;			   
	-webkit-border-radius: 5%;	
	-moz-border-radius: 5%;	
}
最後要說的是border-image屬性，利用強大的九分縮放法。就是把一張背景圖通過百分比劃分成九個部分，這樣在圖片縮放的時候這九個部分就作為單獨的塊來縮放。


我要說的是這個功能真的很酷炫，具體的說明參考https://www.w3school.com.cn/cssref/pr_border-image.asp

3.投影

既然css3已經有強大的box-shadow了，那麼以前弱爆的方法就應該淘汰了！

用法參考:https://www.w3school.com.cn/cssref/pr_box-shadow.asp或者https://www.w3cplus.com/content/css3-box-shadow

4.不透明度

老方法：
{
	opacity: 0.5;
	filter:alpha(opacity=50);
}

簡單的方法：
{
    background-color:rgba(255,0,0,0.5);
}
IE下6不支持透明度，需要使用AlphaImageLoder過濾器，或者使用微軟專有css擴展-行為（behavior），下載合適的.htc文件並在IE6專用的樣式表中引用它就行了。

5.css Sprite

將許多圖片合成在一張大圖裏，然後偏移量來獲取想要的小圖片，這就是css的Sprite精靈。可以減少圖片的請求量，減少服務器壓力。Sprite主要是通過background-position和height，width來實現。一張圖就能理解：




最後更新：2017-04-03 14:54:06

  上一篇：go poj 1528 Perfection
  下一篇：go poj 1517 u Calculate e