background-postion定位與圖片結合實現圓角效果
我要評論background-postion 背景默認鋪設位置的起點為：元素的左上角。
--------------------------------------------------------------------------------
background-color 不能繼承，其默認值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見。 background-image 也不能繼承。事實上，所有背景屬性都不能繼承。–也就說，子元素的背景圖案會覆蓋父元素的背景圖案。
--------------------------------------------------------------------------------
您甚至可以為行內元素設置背景圖像，下面的例子為一個鏈接設置了背景圖像：
1.4 對應這個圖像
我們可以這樣 HTML:
<html><body><div class="box2"><b class="bt2"><b></b></b><b class="bb2"><b></b></b></div></body></html>
這樣，創(chuàng)造了2個b行內元素，即2行（因為是圓角所以用display:block;否則無文字時背景不出現），其中分別又包含了1個b元素。一共4個元素，可以分別對應4個background-postion. CSS:
<style type="text/css">b.bt2, b.bt2 b, b.bb2, b.bb2 b { background: url("<a ) no-repeat scroll 0 0 transparent; display: block; height: 7px;}b.bt2 b { background-position: 100% -7px;}b.bb2 { background-position: 0 -14px;}b.bb2 b { background-position: 100% -21px;}</style>
圖像如下
1.5 background-postion
w3school中有很好的介紹。簡單的說，
默認設置0%,0% 圖片的左上角出現在元素的左上角。
值有3種類型 關鍵詞（center、left…）、數值（px）、百分比（%）
background:數值 c以元素的左上角為原點，以水平向右為x軸正方向、豎直向下為y軸正方向，background的數值屬性表示圖片的左上角在此坐標系的坐標（x,y）
background:百分比 對圖像和元素同時奇效（這個我尚不清楚用例子來說）
background: 100%,100% 圖片右下角與元素右下角對齊
background: 0%，0% 圖片的左上角與元素的左上角對其
本例中的background: 100%,7px 圖片矩形的右邊的邊與元素矩形的右邊的邊相切。同時相對原點，向上移動7px。 cb
相關文章
- 字符代替圓角尖角也是一種在不使用代碼和圖片的另類實現吧，本文整理了一些常用的示例，感興趣的朋友可以收藏下2013-09-12
- css圓角效果的出現引起了網友們的關注，下面以個示例為大家介紹下具體的實現過程，帶有注釋，新手朋友們容易看的懂2013-09-04
- 想做個頁面用到css3的圓角和陰影效果，但ie瀏覽器不支持，之前也聽說有插件可以實現，周六在網上找到了一個方法，原文如下： 但凡是前端工程師，都知道IE6，IE7，IE8不支2013-07-02
- css圓角卷起了一陣風波，只用css來做圓角矩形的技術很早就有了,但是在網頁的設計過程中,我們通常用圖片實現圓角矩形效果。現在網上很多關于無圖片實現css圓角矩形的方法,雖2013-03-25
- css 圓角邊框的出現結束了傳統(tǒng)使用圓角圖片的時代，接下來與大家分享下div 邊框圓角的實現，感興趣的你可以參考下哈，希望對你有所幫助2013-03-15
- 本文將開拓性的探討如何使用字符代替圖片實現貌似只有圖片才能實現的尖角效果，或是多半使用圖片實現的圓角效果;本文提到的一些方法，可能在實際項目中并不實用，關鍵是幫2013-02-27
- 今天處理了一個頁面刷新隨機顯示圖片的功能，發(fā)現直角太丑，想實現圖片圓角，兼容所有瀏覽器,于是網上搜集整理了一下，拿出來和大家分享2012-12-06
CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
border-radius：用這個屬性能實現圓角邊框的效果?，F在只有Mozilla/Firefox 和 Safari 3支持該屬性。2012-03-28- 實現的方法很簡單，其實就是套2層，其中外層用長背景，內層用短背景蓋住。拿高度自適應來說，可以用一個div（用長背景居底鋪）嵌套一個h2（用短背景居頂鋪）標簽2012-02-17
- 矩形框在網頁中較為常見，不過個人覺得還是圓角框更為美觀。那么圓角框是如何用DIV+CSS來實現的呢？2011-07-10