CSS揭秘之《背景圖案》

UCloud 發布于2019-08-29 13:20 / 528人閱讀

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

網格

        html {
            background: #58a;
            background-image: linear-gradient(white 2px, transparent 0),
            linear-gradient(90deg, white 2px, transparent 0),
            linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
            linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
            background-size: 50px 50px, 50px 50px,
            10px 10px, 10px 10px;
        }

具體效果見鏈接

波點

可以用如下代碼來實現

background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

但如果我想實現如下效果而非上面那樣中規中矩

其實原理是一樣的

background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

具體效果見鏈接
需要注意的是第二層背景的偏移定位值必須是貼片寬高的一半

棋盤

html {
            background: #eee;
            background-image: linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
                              linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
            background-position: 0 0, 15px 15px;
            background-size: 30px 30px;
        }

        html {
            background: #eee;
            background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0),
            linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0);
            background-position: 0 0, 15px 15px,
            15px 15px, 30px 30px;
            background-size: 30px 30px;
        }

用以上兩者中的任何一種都可以，其實實現的原理就類似于

具體效果見鏈接
其實用svg方式來實現棋盤效果會更簡單

        html {
            background: #eee url("data:image/svg+xml,
            ");
            background-size: 30px 30px;
        }

效果與css實現一樣，具體效果見鏈接
小訣竅：在svg方案中我們用來讓一行css出現在多選，是因為出于可讀性的考慮，需要把一句 CSS 代碼打斷為多行，只需要用反斜杠（）來轉義每行末尾的換行就可以了

云服務器 GPU云服務器圖案輸出圖案填充圖案大揭秘

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

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

CSS揭秘之《背景圖案》

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

Hwg 2019-08-20 19:08 評論0 收藏0
[CSS]《CSS揭秘》第二章——背景與邊框

摘要：半透明邊框相關語法多重邊框方案需要注意的是，上面所創建的邊框是偽邊框，并不響應鼠標事件。方案以左上角為基準。圖像邊框連續的圖像邊框屬性規定背景的繪制區域。半透明邊框 border:10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; showImg(htt...

elina 2019-08-30 15:53 評論0 收藏0
背景&邊框之魔法武器CSS3

摘要：簡述在頁面的構建過程中，離不開背景邊框，背景和邊框就是最基本的設置了為了實現一些特定的視覺效果，單一的純色背景已經不能滿足現有的效果了。在這里，我們使用純來實現一些相對復雜的背景和邊框效果，這些效果不能很好的實現向下兼容。簡述在頁面的構建過程中，離不開背景、邊框，背景和邊框就是最基本的設置了UI為了實現一些特定的視覺效果，單一的純色背景已經不能滿足現有的效果了。越來越多的圖片背景開...

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

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

DevWiki 2019-08-30 15:56 評論0 收藏0