CSS揭秘之《背景图案》

UCloud 发布于2019-08-29 13:20 / 527人阅读

摘要：网格具体效果见链接波点可以用如下代码来实现但如果我想实现如下效果而非上面那样中规中矩其实原理是一样的具体效果见链接需要注意的是第二层背景的偏移定位值必须是贴片宽高的一半棋盘用以上两者中的任

网格

        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云服务器云服务器图案输出图案填充图案大揭秘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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