背景知识

CSS 渐变, background-size ,“条纹背景”,“灵活的背景定位

难题

几年前,在刚刚获得 :nth-child() / :nth-of-type() 伪类之后,我们最常用其来解决的一个需求就是表格的“斑马条纹”(见下图)。这在以前需要服务器端预先处理、客户端的脚本处理或者是纯手工写死来实现,而
现在只需下面这几行简单的代码就足够了:

tr:nth-child(even) {
background: rgba(0,0,0,.2);
}

尽管如此,当我们想把表格行的这种效果应用到文本行时,仍然有些力不从心 。这种效果对于提高代码段的可读性来说尤为实用。很多开发者最终不得不使用 JavaScript 来把每行代码包裹进一个个 <div> 元素中,然后

运用上述 :nth-child() 技巧来实现斑马条纹——幸好大多数语法着色脚本都可以顺带消化掉这个令人头皮发麻的过程。这种方式并不理想,它不仅在理论上有违纯粹原则(JavaScript 不应该掺和到样式层面来),而且过多的
DOM 元素还会拖累整个页面的性能;此外,它其实不太健壮。(当你增大字号导致其中的某一“行”发生折行时会怎么样?)我们还有更好的办法吗?

解决方案

  抛开以前那种给每一行套元素再加背景的做法,我们换一种思路来重新考虑这个问题。为什么不对整个元素设置统一的背景图像,一次性加上所有的斑马条纹呢?乍听起来这好像是个糟糕的点子,但别忘了,我们可以在CSS 中用渐变直接生成背景图像,而且可以用 em 单位来设定背景尺寸,这样背景就可以自动适应 font-size 的变化了。

  让我们用这个方法给下图中的这段代码加上斑马条纹。首先,我们需要运用“条纹背景”一节中所描述的方,创建出水平条纹背景。它的background-size 需要设置为 line-height 的两倍,因为每个背景贴片需要覆盖两行代码。我们最初尝试写出的代码可能是这样的:

<pre><code>while (true) {
var d = new Date();
if (d.getDate()==1 &&
d.getMonth()==3) {
alert("TROLOLOL");
}
}</code></pre>

  

pre {
padding: 0 .5em;
line-height: 1.2;
background: hsl(20, 50%, 95%);
background-image: linear-gradient(
rgba(120,0,0,.1) 50%, transparent 0);
background-size: auto 2.4em;
background-origin: content-box;
font-family: Consolas, Monaco, monospace;
} code { font: inherit }

最终效果:

其中background-origin 这个属性正是我们所需要的:它可以告诉浏览器在解析 background-position时以 content box 的外沿作为基准,而不是默认的 padding box 外沿。因为我们是用半透明色来生成条纹的,所以在改变背景色时,斑马条纹仍然可以正常显示。这个方法总体来说是十分灵活的,唯一可能破坏效果的情况 可能就是在改变 line-height 时忘了相应地调整 background-size 。

css3 文本行的斑马线的更多相关文章

  1. 对文本行按特定字段排序(前N个字符或后N个字符),TCPL 练习5-17

    The C programming language 的关于文本行排序的问题有很多种要求的方式,在对每行的字段排序方面,最简单的是例如对前N个字符或者末位N个字符进行排序,更高一点的要求是,对特殊符号 ...

  2. 对文本行进行排序,新增-d(目录排序),只对字母数字空格排序(TCPL 练习5-16)

    文本行的排序用到了命令行参数以及多级指针,在要求只对字母数字空格进行排序时,关键的问题点是兼容-f命令参数,也就是排序的同时忽略大小写.由于在之前的练习中,我将忽略大小写的比较方法重新写了一个函数tr ...

  3. UltraEdit文本行数多变一和一边多

    一.UltraEdit文本行数多行转换成一行 1.文本样式内容 1.qwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiop ...

  4. Linux文本行倒序排列6种方法

    Linux文本行倒序排列6种方法 1. 命令方法: nl filename | sort -nr | cut -f2 这个方法很unix风格,使用多命令组合完成某种功能是典型的unix特点 单命令: ...

  5. 读取txt文件将文本行组合成特定格式

    有一网友要求从txt文本文件读取一些数据,然后组合为特定格式的数据行.原论题如下,刚才开始的要求描述得不太清楚,后来补充完整了. Insus.NET觉得本论题可有练习文本件读取功力,因此尝试实现一下. ...

  6. [Python学习笔记-008] 使用双向链表去掉重复的文本行

    用Python处理文本文件是极方便的,当文本文件中有较多的重复的行的时候,将那些重复的行数去掉并打印诸如"...<repeats X times>..."有助于更好的浏 ...

  7. CSS3属性—— line-clamp控制文本行数

    说明: 限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为 ...

  8. css 的包含块 、负外边距,字体,文本行高

    一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...

  9. linux下统计文本行数的各种方法(二)

    上一篇讲的都是统计单个文件的方法,直接在命令行执行就可以.现在试试脚本的方式,统计多个文件的行数 一.统计目录下所有文件的文件数及所有行数 脚本暂时命名为count.sh,代码如下: #!/bin/b ...

随机推荐

  1. 滴滴HBase大版本滚动升级之旅

    桔妹导读:滴滴HBase团队日前完成了0.98版本 -> 1.4.8版本滚动升级,用户无感知.新版本为我们带来了丰富的新特性,在性能.稳定性与易用性方便也均有很大提升.我们将整个升级过程中面临的 ...

  2. Java规则引擎 Easy Rules

    1.  Easy Rules 概述 Easy Rules是一个Java规则引擎,灵感来自一篇名为<Should I use a Rules Engine?>的文章 规则引擎就是提供一种可选 ...

  3. office2016专业增强版激活密匙 (shell激活版)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_42642945/article/d ...

  4. 第一个SpringMVC程序 (注解版)

    1.新建一个web项目 2.导入相关jar包 3.编写web.xml , 注册DispatcherServlet <?xml version="1.0" encoding=& ...

  5. @atcoder - AGC026F@ Manju Game

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个含 N 个数的序列,Alice 与 Bob 在博弈.Al ...

  6. 第m大的身份证号码(局部排序代全局、结构体排序)

    第m大的身份证号码(点击) 时间限制: 1 Sec  内存限制: 128 MB                                                             ...

  7. PyCharm罢工并向你丢出了pip升级需求

    一.事件缘由 最近在搞接口自动化框架,基于python自然少不了使用PyCharm.本来都是 在解决脚本上遇到的坑,突然出现了第三方库安装失败,这感觉就像大热天吃到 冰激凌,昏沉的脑袋瞬间清醒许多. ...

  8. 商城02——dubbo框架整合_商品列表查询实现_分页

    1.   课程计划 1.服务中间件dubbo 2.SSM框架整合. 3.测试使用dubbo 4.后台系统商品列表查询功能实现. 5.监控中心的搭建 2.   功能分析 2.1. 后台系统所用的技术 框 ...

  9. 布局之: flex(CSS3新增)

    flex 基本概念 flex布局(flex是flexible box的缩写), 也称为弹性盒模型 .将属性和属性值(display:flex; )写在哪个标签样式中,谁就是 容器:它的所有子元素自动成 ...

  10. 这样让你的 IDEA 好用到飞起来!

    IDEA提高效率的配置项,每个开发者必须掌握的技能!下面这 32 条完美设置成功后,开发效率显著提升. 1.设置maven 1.在File->settings->搜索maven 2.Mav ...