CSS 条纹背景秘探
CSS 条纹背景秘探
- CSS 条纹背景秘探
- CSS 线性渐变
- background-size
- 实现条纹
- 垂直条纹
- 斜向条纹
CSS 条纹背景秘探
要想在网页中实 现条纹图案,通常,我们的方法是创建一个单独的位图文件,然后每次需要做些调整时,都用图像编辑器来修改它。可能有人试过用 SVG 来取代位图,但这样还是会有一个独立的文件,而且它的语法也远远不够友好。那么如何直接在 CSS 中创建条纹图案呢?
首先我们要先介绍 CSS 线性渐变
,background-size
。
CSS 线性渐变
线性渐变创建了一条沿直线前进的颜色带。
要创建最基本的渐变类型,您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标,也可以指定任意数量。
.simple-linear {background: linear-gradient(blue, pink);
}
当然我们也可以改变渐变方向。
默认情况下,线性渐变的方向是从上到下, 你可以指定一个值来改变渐变的方向。
.horizontal-gradient {background: linear-gradient(to right, blue, pink);
}
你甚至可以设置渐变方向为从一个对角到另一个对角。
.diagonal-gradient {background: linear-gradient(to bottom right, blue, pink);
}
同时还能设置渐变角度。
如果你想要更精确地控制渐变的方向,你可以给渐变设置一个具体的角度。
.angled-gradient {background: linear-gradient(70deg, blue, pink);
}
在使用角度的时候, 0deg
代表渐变方向为从下到上, 90deg
代表渐变方向为从左到右,诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。
当然也可以设置颜色终止位置。
你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置0,1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数, 0%
表示起始点, 而100%
表示终点,但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置,那么它将会被自动计算,第一种颜色会在0%处停止,而最后一种颜色是100%,至于其他颜色则是在它邻近的两种颜色的中间停止。
.multicolor-linear {background: linear-gradient(to left, lime 28px, red 77%, cyan);
}
background-size
background-size
设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
语法
background-size: length|percentage|cover|contain;
值 | 描述 |
---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动) |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
实现条纹
假设我们有一条基本的垂直线性渐变,颜色从 red
过渡到 blue
:
background: linear-gradient(red, blue);
现在,让我们试着把这两个色标拉近一点:
background: linear-gradient(red 20%, blue 80%);
现在容器顶部的 20%
区域被填充为 red
实色,而底部 20%
区域被填充为 blue
实色。真正的渐变只出现在容器 60%
的高度区域。如果我们把两个色标继续拉近(分别改为 40%
和 60%
),那真正的渐变 区域就变得更窄了。你是不是开始好奇,如果我们把两个色标重合在一起, 会发生什么?
background: linear-gradient(red 50%, blue 50%);
“如果多个色标具有相同的位置,它们会产生一个无限小的过渡区域, 过渡的起止色分别是第一个和最后一个指定值。从效果上看,颜色会在那个位置突然变化,而不是一个平滑的渐变过程。”
你在上图中可以看到,已经没有任何渐变效果了,只有两块实色, 各占据了 background-image
一半的面积。本质上,我们已经创建了两条巨 大的水平条纹。
因为渐变是一种由代码生成的图像,我们能像对待其他任何背景图像那 样对待它,而且还可以通过 background-size
来调整其尺寸:
background: linear-gradient(red 50%, blue 50%);
background-size: 100% 30px;
在上图中可以看到,我们把这两条条纹的高度都缩小到了 15px
。由于背景在默认情况下是重复平铺的,整个容器其实已经被填满了水平条纹。
我们还可以用相同的方法来创建不等宽的条纹,只需调整色标的位置值即可:
background: linear-gradient(red 30%, blue 30%);
background-size: 100% 30px;
为了避免每次改动条纹宽度时都要修改两个数字,我们可以再次从规范那里找到捷径。
“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小,则该色标的位置值会被设置为它前面所有色标位置值的最大值。”
这意味着,如果我们把第二个色标的位置值设置为 0,那它的位置就总是会被浏览器调整为前一个色标的位置值,这个结果正是我们想要的。因此,下面的代码会产生跟上图完全一样的条纹背景。
background: linear-gradient(red 30%, blue 0);
background-size: 100% 30px;
如果要创建超过两种颜色的条纹,也是很容易的。举例来说,下面的代 码可以生成三种颜色的水平条纹。
background: linear-gradient(red 33.3%,blue 0, blue 66.6%, yellow 0);
background-size: 100% 45px;
垂直条纹
水平条纹是最容易用代码写出来的,但我们在网页上看到的条纹图案并不都是水平的。有些条纹是垂直的,而且某些形态的斜条纹或许更受欢迎,或者看起来更加有趣。幸运的是,CSS 渐变同样也能帮助我们创建出这些效果,只是难度稍有不同。
垂直条纹的代码跟水平条纹几乎是一样的,差别主要在于:我们需要在开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中,我们其实也可以加上这个参数,只不过它的默认值 to bottom
本来就跟我们的意图一致,于是就省略了。最后,我们还需要把 background-size
的值颠倒 一下,原因应该不用多说了吧:
background: linear-gradient(to right, /* 或 90deg */#fb3 50%, #58a 0);
background-size: 30px 100%;
斜向条纹
在完成了水平和垂直条纹之后,我们可能会顺着往下想:如果我们再次改变 background-size
的值和渐变的方向,是不是就可以得到斜向(比如 45°)的条纹图案呢?比如这样:
background: linear-gradient(45deg, red 50%, blue 0);
background-size: 30px 30px;
可以发现,这个办法行不通。原因在于我们只是把每个“贴片”内部的渐变旋转了 45°,而不是把整个重复的背景都旋转了。我们 需要在 CSS 代码中重新实现的贴片,因此我们需要增加一些色标:
background: linear-gradient(45deg,red 25%, blue 0, blue 50%,red 0, red 75%, blue 0);
background-size: 30px 30px;
CSS 条纹背景秘探相关推荐
- CSS:条纹背景的实现
CSDN话题挑战赛第2期 参赛话题:学习笔记 学习之路,长路漫漫,写学习笔记的过程就是把知识讲给自己听的过程.这个过程中,我们去记录思考的过程,便于日后复习,梳理自己的思路.学习之乐,独乐乐,不如众乐 ...
- html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下 一.横向条纹如下代码:background ...
- html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...
- CSS揭秘:5.条纹背景(上)
文章目录 条纹背景 CSS线性渐变 css线性渐变小结 background-size 水平条纹 水平 First Try 水平 Second Try 水平 Third Try 水平 Forth Tr ...
- CSS设置背景颜色 拼接 (一半黑一半白) 条纹 渐变
CSS设置背景颜色 拼接 (一半黑一半白) 条纹 渐变 首先下面是用到的css样式 线性渐变 这个属性我还说不明白 我就简单的使用一下 有兴趣的搜索CSS线性渐变就OK background-imag ...
- html中背景条纹效果,css 条纹背景效果
条纹背景是基于渐变背景. CSS代码 .bg{ height: 100px; width: 200px; background: linear-gradient(#fb3,#58a); } 将这两个色 ...
- css 世界之条纹背景
水平与垂直条纹 线性渐变 linear-gradient 需求: 采用 css 实现个横向与纵向的条纹背景,类似如下: 横向条纹 首先我们都知道 linear-gradient 属性是用来实现线性渐变 ...
- css:linear-gradient实现水平条纹背景,垂直条纹背景,斜向条纹背景
一.水平条纹效果: <html> <head> <style type="text/css"> div { font-size:100px; t ...
- html中背景条纹效果,使用CSS线性渐变 制作条纹背景
主要使用的属性 linear-gradient background:linear-gradient(#000,#ccc); Paste_Image.png 取消中间的渐变过度 background: ...
最新文章
- Robinhood应用宣布添加BCH和LTC交易
- hiernate二级缓存区域
- Unigui 服务器解析php,如何正确使用uniGUI的HyperServer(负载均衡)功能
- linux shell awk 单引号分割
- 《穿越计算机的迷雾》读书笔记三
- 【Python3】Python模块与包的导入
- ubuntu 应用程序菜单_Ubuntu智能手机,塔式无人机飞行控制应用程序等
- 麒麟980+巴龙5000!华为Mate 20 X 5G版通过3C认证:支持40W快充
- 运用“异或”对原文加密,并解密
- Win10安装python扩展的几种方式
- 学习总结(一):ad画板总结
- MySQL查询所有叶子节点
- python实现英雄联盟信息获取
- 推挽输出和开漏输出详解
- scrapy之spiders
- 学习Java第一天笔记
- 张驰咨询:某能源公司举办首期精益六西格玛黑带项目结硕果
- Linux 7通过防火墙安全策略修补安全漏洞
- 小程序源码:游戏扫码登录多功能工具箱集合
- flutter clean
热门文章
- Mac下的winscp替代者 FileZilla
- 出海竞争加剧,全球头部秀场直播平台LiveMe如何应对新挑战?
- “死亡之星”——“阿波非斯”
- 如何修改PDF并调整页面尺寸大小
- WSA无法调用GPU跑分解决方法
- c语言软件如何调字间距,sublime text2如何更改行间距和字符间距?
- 猜数字游戏-人出题,电脑猜(转贴)
- 基于DES加密的TCP聊天程序
- 有趣的23000----整理(02)l词根
- hdu计算机网络实验,计算机网络实验报告(杭电).doc