继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS的秘密——背景和边框(中)

秋婵
关注TA
已关注
手记 7
粉丝 23
获赞 277

1.5 条纹背景

形形色色的条纹元素在网页上的运用广泛,至少和一些从杂志到壁纸的视觉设计一样无处不在,然而,在工作中我们完成条纹背景并不理想。通常,通常我们会制作一个展开的位图,我们每次需要做一些改变时都需要再次编辑图片。有些可能用SVG(可缩放矢量图形)代替,但始终是一个独立的文件,并且语法并不是很友好。
秉承DRY(Don't repeat yourself)的精神,我们可以直接用CSS制作条纹。
(1)水平条纹

/* 基本的线性渐变条纹,从#fb3渐变到#58a */
background: linear-gradient(#fb3, #58a);
/* 可以用background-size设置条纹的大小,前一个值代表宽度,后一个值代表高度*/
background-size: 100% 30px;
/* 由于背景默认平铺,故以上条纹会铺满整个浏览器;可根据需要设置不平铺 */
background-repeat: no-repeat;

/* 顶部20%是实在的#fb3,底部20%是实在的#58a,渐变部分占据了整体高度的60% */
background: linear-gradient(#fb3 20%, #58a 80%);
background-size: 100% 30px;

/* 如果两种颜色都设置为50%,则上半部分是实在的#fb3,下半部分是实在的#58a,没有渐变部分 */
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

/* 只要两种颜色的比例值一样,就不存在渐变部分,可按前者的比例为准,设置两色不同粗细条纹;
例如,将#fb3设置为30%,则顶部30%是实在的#fb3,只要#58a的比例不大于#30%(不一定等于30%),剩下的都是实在的#58a */
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;

/* 从上面的分析发现,如果是不要渐变部分,第二个颜色的比例值似乎并不怎么重要,我们可以采取更加DRY的方式,直接设置为0,达成相同的效果 */
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

/* 实际上还可以很方便地设置两种颜色以上的条纹 */
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

(2)垂直条纹

/* 垂直条纹的设置几乎与水平条纹的设置一样,只是多了一个设置方向的属性,默认值是to bottom,正是水平条纹需要的 */
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

(3)斜纹

/* 我们可能会尝试,如果把方向设置为45度角,结果会不会得到对角线条纹,结果是否定的;
这样做得到的是看起来由一个个边长30px,对角颜色不同的正方形拼接成的背景图,并没有将其作为一个整体旋转45度角*/
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;

/* 在一个整体的对角线条纹背景图上截取一个正方形,会发现实际上里面包含四个无缝连接的条纹,不止两个*/
background: linear-gradient(45deg,
            #fb3 25%, #58a 0,
            #58a 50%, #fb3 0,
            #fb3 75%, #58a 0);
/* 如果宽高依旧设置为30px,根据勾股定理,实际上条纹的宽度会小于15px;
如果想要宽度看起来约等于15px,可设置background-size: 42.4px 42.4px(省略具体数学计算) */
background-size: 30px 30px;

(4)更好的斜纹
上面设置斜纹的方式弹性不够好,如果我们需要的不是45度,而是其他角度,仅仅改变角度是得不到想要的效果的;少有人知道linear-gradient还有平铺版repeating-linear-gradient,实现方式一样,只是颜色会平铺,直至铺满整个图片。
使用repeating-linear-gradient的好处有:1)减少重复:我们改变任何一种颜色只需要改两处,而不是三处。2)可以方便修改不同角度,无需考虑条纹的无缝连接。

/* 有渐变部分的45度斜角条纹 */
background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
/* 注意不再是用background-size */
height:100%;

/* 无渐变部分的45度斜角条纹 */
background: repeating-linear-gradient(45deg,
            #fb3, #fb3 15px, #58a 0, #58a 30px);
height:100%;

(5)灵活的细微条纹
很多情况下,我们的条纹不是完全不同的颜色,而是有着细微的差别的相近颜色。然而,这种联系不是特别容易通过RGB颜色看出来;更进一步地,如果我们想改变基色,我们需要修改四处地方。

/* #79b和#58a是相近颜色 */
background: repeating-linear-gradient(30deg,
            #79b, #79b 15px, #58a 0, #58a 30px);
height:100%;

/* 更好的实现方式 */
background: #58a;
background-image: repeating-linear-gradient(30deg,
              hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
              transparent 0, transparent 30px);
/* 百分之百的视口高度 */
height: 100vh;

1.6 复杂的背景图案

除了上述简单的条纹图案外,CSS3还能实现如网格,波尔卡圆点,棋盘等更加复杂的图案。
点击这里CSS3 Patterns Gallery,你会惊叹CSS3的神奇!
下面只介绍一些相对简单常见的背景图案实现方式。
(1)网格

/* 利用水平,垂直条纹的结合,再加上透明度的运用,可以实现网格图案 */
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
                  linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

/* 有时候我们需要调整网格大小,而线宽保持不变 */
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
                  linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

/* 大格套小格 */
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;

(2)波卡尔圆点

/* 基本的圆点图案 */
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

/* 为了美观,我们可以结合两个radial-gradient,并给予不同的位置坐标,形成错开排列的波卡尔圆点;
注意:第二个位置坐标必须是圆点大小的一半*/
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;

(3)棋盘
细微的棋盘图案可以作为一个不愠不火的纯色背景。用CSS制作棋盘图案比我们所期望的棘手一些。
具体实现的探索思路有点复杂,这里就略过了,只列出最后结果。

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;

/* 用CSS实现的代码有点多的时候,可以用SVG的方式 */
background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
            <rect x="50" width="50" height="50" />\
            <rect y="50" width="50" height="50" />\
            </svg>');
background-size: 30px 30px;

另:

打开App,阅读手记
13人推荐
发表评论
随时随地看视频慕课网APP