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

RyanQ 發布于2019-08-29 13:20 / 2824人閱讀

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

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

        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 屬性已經得到擴展，它允許我們指定背景圖片距離任
意角的偏移量，只要我們在偏移量前面指定關鍵字

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

3、針對第二種方式實現的回退方案

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

具體效果見鏈接
4、使用padding加background-origin
備注：此方案適用于偏移量與容器的內邊距一致，默認情況下background-position 是以 padding box 為準的,所以background-position:top left; top left是以 padding box 的左上角，之所以默認值是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中的運算符需要兩側各加一個空白符，否則會產生解析錯誤，現在知道真正的原因是為了向前兼容,在未來，在 calc() 內部可能會允許使用關鍵字，而這些關鍵字可能會含連字符（即減號）

GPU云服務器云服務器最靈活的編程語言靈活遷移靈活性阿里云靈活性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112532.html

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

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

googollee 2019-08-20 19:08 評論0 收藏0
css-secrets (css揭秘) 知識點目錄，值得深入學習！

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

DevWiki 2019-08-30 15:56 評論0 收藏0
《CSS揭秘》-背景與邊框

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

tangr206 2019-08-30 15:55 評論0 收藏0
CSS揭秘之《背景圖案》

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

Hwg 2019-08-20 19:08 評論0 收藏0