成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS揭秘之《背景圖案》

Hwg / 2100人閱讀

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

網(wǎng)格 
        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;
        }

具體效果見鏈接

波點(diǎn)

可以用如下代碼來實(shí)現(xiàn)

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

但如果我想實(shí)現(xiàn)如下效果而非上面那樣中規(guī)中矩


其實(shí)原理是一樣的

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;
        }

用以上兩者中的任何一種都可以，其實(shí)實(shí)現(xiàn)的原理就類似于

具體效果見鏈接
其實(shí)用svg方式來實(shí)現(xiàn)棋盤效果會更簡單

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

效果與css實(shí)現(xiàn)一樣，具體效果見鏈接
小訣竅：在svg方案中我們用來讓一行css出現(xiàn)在多選，是因?yàn)槌鲇诳勺x性的考慮，需要把一句 CSS 代碼打斷為多行，只需要用反斜杠（）來轉(zhuǎn)義每行末尾的換行就可以了

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85202.html

相關(guān)文章

  • CSS揭秘之《背景圖案》

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

    UCloud 評論0 收藏0

  • [CSS]《CSS揭秘》第二章——背景與邊框

    摘要：半透明邊框相關(guān)語法多重邊框方案需要注意的是，上面所創(chuàng)建的邊框是偽邊框，并不響應(yīng)鼠標(biāo)事件。方案以左上角為基準(zhǔn)。圖像邊框連續(xù)的圖像邊框?qū)傩砸?guī)定背景的繪制區(qū)域。 半透明邊框 border:10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; showImg(htt...

    elina 評論0 收藏0

  • 背景&邊框之魔法武器CSS3

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

    SwordFly 評論0 收藏0

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

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

    DevWiki 評論0 收藏0

發(fā)表評論

0條評論

Hwg

男|高級講師

TA的文章

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