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

資訊專欄INFORMATION COLUMN

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

RyanQ / 2822人閱讀

摘要：針對(duì)容器某個(gè)角對(duì)背景圖片做偏移定位現(xiàn)在就假設(shè)想針對(duì)容器右下角右側(cè)偏移，底部偏移有如下幾種方式原理設(shè)置透明邊框給指定值備注因?yàn)橹袑傩砸呀?jīng)得到擴(kuò)展，它允許我們指定背景圖片距離任意角的偏移量，只要我們?cè)谄屏壳懊嬷付P(guān)鍵字上面一

針對(duì)容器某個(gè)角對(duì)背景圖片做偏移定位
現(xiàn)在就假設(shè)想針對(duì)容器右下角右側(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值
備注：因?yàn)閏ss3中background-position 屬性已經(jīng)得到擴(kuò)展， 它允許我們指定背景圖片距離任
意角的偏移量， 只要我們?cè)谄屏壳懊嬷付P(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、針對(duì)第二種方式實(shí)現(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這樣邊框才不會(huì)遮擋背景圖片

        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計(jì)算寬高

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

具體效果見鏈接

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

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

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

相關(guān)文章

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

    摘要：針對(duì)容器某個(gè)角對(duì)背景圖片做偏移定位現(xiàn)在就假設(shè)想針對(duì)容器右下角右側(cè)偏移，底部偏移有如下幾種方式原理設(shè)置透明邊框給指定值備注因?yàn)橹袑傩砸呀?jīng)得到擴(kuò)展，它允許我們指定背景圖片距離任意角的偏移量，只要我們?cè)谄屏壳懊嬷付P(guān)鍵字上面一 針對(duì)容器某個(gè)角對(duì)背景圖片做偏移定位現(xiàn)在就假設(shè)想針對(duì)容器右下角右側(cè)20px偏移，底部10px偏移有如下幾種方式1、原理設(shè)置透明邊框 div { ...

    googollee 評(píng)論0 收藏0

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

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

    DevWiki 評(píng)論0 收藏0

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

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

    tangr206 評(píng)論0 收藏0

  • CSS揭秘之《背景圖案》

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

    Hwg 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<