国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS揭秘之《靈活的背景定位》

googollee / 1400人閱讀

摘要：針對容器某個角對背景圖片做偏移定位現(xiàn)在就假設(shè)想針對容器右下角右側(cè)偏移，底部偏移有如下幾種方式原理設(shè)置透明邊框給指定值備注因為中屬性已經(jīng)得到擴(kuò)展，它允許我們指定背景圖片距離任意角的偏移量，只要我們在偏移量前面指定關(guān)鍵字上面一

針對容器某個角對背景圖片做偏移定位
現(xiàn)在就假設(shè)想針對容器右下角右側(cè)20px偏移，底部10px偏移
有如下幾種方式
1、原理設(shè)置透明邊框

        div {
            background: url(../images/code-pirate.svg) no-repeat 100% 100% #58a;
            border-right: 20px solid transparent;
            border-bottom: 10px solid transparent;
        }

2、給background-position指定right bottom值
備注：因為css3中background-position 屬性已經(jīng)得到擴(kuò)展， 它允許我們指定背景圖片距離任
意角的偏移量， 只要我們在偏移量前面指定關(guān)鍵字

        div {
            background: url(../images/code-pirate.svg) no-repeat #58a;
            background-position: right 20px bottom 10px;
            /*上面一句寫成這樣也是同樣的效果
            background-position: bottom 10px right 20px ;*/
        }

3、針對第二種方式實現(xiàn)的回退方案

        div {
            background: url(../images/code-pirate.svg) no-repeat bottom right #58a;
            background-position: right 20px bottom 10px;
        }

具體效果見 鏈接
4、使用padding加background-origin
備注：此方案適用于偏移量與容器的內(nèi)邊距一致，默認(rèn)情況下background-position 是以 padding box 為準(zhǔn)的,所以background-position:top left; top left是以 padding box 的左上角，之所以默認(rèn)值是padding-box這樣邊框才不會遮擋背景圖片

        div {
            padding: 10px 20px;
            background: url(../images/code-pirate.svg) no-repeat #58a bottom right;
            /* 或 100% 100% */
            background-origin: content-box;
        }

具體效果見鏈接
5、使用透明邊框加background-origin

        div {
            padding: 0;
            border-right: 20px solid transparent;
            border-bottom: 10px solid transparent;
            background: url(../images/code-pirate.svg) no-repeat #58a bottom right;
            /* 或 100% 100% */
            background-origin: padding-box;
        }

6、使用calc計算寬高

        div {
            background: url(../images/code-pirate.svg) no-repeat #58a;
            background-position: calc(100% - 20px) calc(100% - 10px);
        }

具體效果見鏈接

備注：以前只知道calc中的運(yùn)算符需要兩側(cè)各加一個空白符，否則會產(chǎn)生解析錯誤，現(xiàn)在知道真正的原因是為了向前兼容,在未來，在 calc() 內(nèi)部可能會允許使用關(guān)鍵字，而這些關(guān)鍵字可能會含連字符（即減號）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85205.html

相關(guān)文章

  • CSS揭秘之《靈活的背景定位》

    摘要：針對容器某個角對背景圖片做偏移定位現(xiàn)在就假設(shè)想針對容器右下角右側(cè)偏移，底部偏移有如下幾種方式原理設(shè)置透明邊框給指定值備注因為中屬性已經(jīng)得到擴(kuò)展，它允許我們指定背景圖片距離任意角的偏移量，只要我們在偏移量前面指定關(guān)鍵字上面一 針對容器某個角對背景圖片做偏移定位現(xiàn)在就假設(shè)想針對容器右下角右側(cè)20px偏移，底部10px偏移有如下幾種方式1、原理設(shè)置透明邊框 div { ...

    RyanQ 評論0 收藏0

  • css-secrets (css揭秘) 知識點目錄，值得深入學(xué)習(xí)！

    摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧 第二章 邊框與背景 半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

    DevWiki 評論0 收藏0

  • 《CSS揭秘》-背景與邊框

    摘要：給一個容器設(shè)置一層白色背景和一道半透明白色邊框。思路實際是設(shè)置的背景會延伸到邊框所在的區(qū)域的下層，可以通過屬性調(diào)整背景的默認(rèn)行為。優(yōu)點邊框樣式十分靈活。缺點只適用于雙層邊框的場景邊框不一定會貼合屬性產(chǎn)生的圓角。 1.給一個容器設(shè)置一層白色背景和一道半透明白色邊框。 思路：實際是設(shè)置的背景會延伸到邊框所在的區(qū)域的下層，可以通過background-clip屬性調(diào)整背景的默認(rèn)行為。 bac...

    tangr206 評論0 收藏0

  • CSS揭秘之《背景圖案》

    摘要：網(wǎng)格具體效果見鏈接波點可以用如下代碼來實現(xiàn)但如果我想實現(xiàn)如下效果而非上面那樣中規(guī)中矩其實原理是一樣的具體效果見鏈接需要注意的是第二層背景的偏移定位值必須是貼片寬高的一半棋盤用以上兩者中的任 網(wǎng)格 html { background: #58a; background-image: linear-gradient(white...

    Hwg 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<