欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

background-postion定位與圖片結(jié)合實(shí)現(xiàn)圓角效果

  發(fā)布時(shí)間：2011-07-27 11:27:15   作者：佚名   我要評(píng)論
background-postion 背景默認(rèn)鋪設(shè)位置的起點(diǎn)為：元素的左上角.

background-postion 背景默認(rèn)鋪設(shè)位置的起點(diǎn)為：元素的左上角。

--------------------------------------------------------------------------------

background-color 不能繼承，其默認(rèn)值是 transparent。transparent 有“透明”之意。也就是說(shuō)，如果一個(gè)元素沒(méi)有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見(jiàn)。 background-image 也不能繼承。事實(shí)上，所有背景屬性都不能繼承。–也就說(shuō)，子元素的背景圖案會(huì)覆蓋父元素的背景圖案。

--------------------------------------------------------------------------------

您甚至可以為行內(nèi)元素設(shè)置背景圖像，下面的例子為一個(gè)鏈接設(shè)置了背景圖像：

1.4 對(duì)應(yīng)這個(gè)圖像
我們可以這樣 HTML:

復(fù)制代碼
代碼如下:

<html><body><div class="box2"><b class="bt2"><b></b></b><b class="bb2"><b></b></b></div></body></html>

這樣，創(chuàng)造了2個(gè)b行內(nèi)元素，即2行（因?yàn)槭菆A角所以用display:block;否則無(wú)文字時(shí)背景不出現(xiàn)），其中分別又包含了1個(gè)b元素。一共4個(gè)元素，可以分別對(duì)應(yīng)4個(gè)background-postion. CSS:

復(fù)制代碼
代碼如下:

<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中有很好的介紹。簡(jiǎn)單的說(shuō)，

 默認(rèn)設(shè)置0%,0% 圖片的左上角出現(xiàn)在元素的左上角。
值有3種類型 關(guān)鍵詞（center、left…）、數(shù)值（px）、百分比（%）
background:數(shù)值 c以元素的左上角為原點(diǎn)，以水平向右為x軸正方向、豎直向下為y軸正方向，background的數(shù)值屬性表示圖片的左上角在此坐標(biāo)系的坐標(biāo)（x,y）
background:百分比 對(duì)圖像和元素同時(shí)奇效（這個(gè)我尚不清楚用例子來(lái)說(shuō)）
background: 100%,100% 圖片右下角與元素右下角對(duì)齊
background: 0%，0% 圖片的左上角與元素的左上角對(duì)其
本例中的background: 100%,7px 圖片矩形的右邊的邊與元素矩形的右邊的邊相切。同時(shí)相對(duì)原點(diǎn)，向上移動(dòng)7px。 cb

相關(guān)文章

  • 使用字符代替圓角尖角研究心得分享

    字符代替圓角尖角也是一種在不使用代碼和圖片的另類實(shí)現(xiàn)吧，本文整理了一些常用的示例，感興趣的朋友可以收藏下
    2013-09-12

  • css實(shí)現(xiàn)的圓角效果帶有注釋

    css圓角效果的出現(xiàn)引起了網(wǎng)友們的關(guān)注，下面以個(gè)示例為大家介紹下具體的實(shí)現(xiàn)過(guò)程，帶有注釋，新手朋友們?nèi)菀卓吹亩?/div> 2013-09-04

  • 讓IE6、IE7、IE8支持CSS3的圓角、陰影樣式

    想做個(gè)頁(yè)面用到css3的圓角和陰影效果，但ie瀏覽器不支持，之前也聽(tīng)說(shuō)有插件可以實(shí)現(xiàn)，周六在網(wǎng)上找到了一個(gè)方法，原文如下： 但凡是前端工程師，都知道IE6，IE7，IE8不支
    2013-07-02

  • div+css用邊框?qū)崿F(xiàn)圓角矩形(多樣式)

    css圓角卷起了一陣風(fēng)波，只用css來(lái)做圓角矩形的技術(shù)很早就有了,但是在網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中,我們通常用圖片實(shí)現(xiàn)圓角矩形效果?，F(xiàn)在網(wǎng)上很多關(guān)于無(wú)圖片實(shí)現(xiàn)css圓角矩形的方法,雖
    2013-03-25

  • div+css無(wú)圖邊框圓角實(shí)現(xiàn)思路及代碼

    css 圓角邊框的出現(xiàn)結(jié)束了傳統(tǒng)使用圓角圖片的時(shí)代，接下來(lái)與大家分享下div 邊框圓角的實(shí)現(xiàn)，感興趣的你可以參考下哈，希望對(duì)你有所幫助
    2013-03-15

  • 使用字符代替圖片實(shí)現(xiàn)圓角或尖角效果研究

    本文將開(kāi)拓性的探討如何使用字符代替圖片實(shí)現(xiàn)貌似只有圖片才能實(shí)現(xiàn)的尖角效果，或是多半使用圖片實(shí)現(xiàn)的圓角效果;本文提到的一些方法，可能在實(shí)際項(xiàng)目中并不實(shí)用，關(guān)鍵是幫
    2013-02-27

  • css實(shí)現(xiàn)圖片圓角 兼容所有瀏覽器實(shí)現(xiàn)代碼

    今天處理了一個(gè)頁(yè)面刷新隨機(jī)顯示圖片的功能，發(fā)現(xiàn)直角太丑，想實(shí)現(xiàn)圖片圓角，兼容所有瀏覽器,于是網(wǎng)上搜集整理了一下，拿出來(lái)和大家分享
    2012-12-06

  • CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)

    border-radius：用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果。現(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。
    2012-03-28

  • 滑動(dòng)門(mén) 圓角背景寬度和高度自適應(yīng)

    實(shí)現(xiàn)的方法很簡(jiǎn)單，其實(shí)就是套2層，其中外層用長(zhǎng)背景，內(nèi)層用短背景蓋住。拿高度自適應(yīng)來(lái)說(shuō)，可以用一個(gè)div（用長(zhǎng)背景居底鋪）嵌套一個(gè)h2（用短背景居頂鋪）標(biāo)簽
    2012-02-17

  • div+css打造可變高寬的圓角框

    矩形框在網(wǎng)頁(yè)中較為常見(jiàn)，不過(guò)個(gè)人覺(jué)得還是圓角框更為美觀。那么圓角框是如何用DIV+CSS來(lái)實(shí)現(xiàn)的呢？
    2011-07-10

最新評(píng)論