最近遇到需要给一段文字加背景色。类似于在学校用记号笔记笔记的效果。第一个想到的图像可能是text-decoration:line-through;但是这里有个问题，上图：font-size:60px;}显然，由于文字大小不一致，会导致划线的位置错位。看下图的解决方案，这里个别文字的大小没有变化。大家可以自己试试。附上代码：
文子同学文子同学老师早上好span>同学们早上好
div{font-size:40px;}#s1{background-image:linear-gradient(tobottom,#fff45%,#0aa45%,#0aa60%,#fff60%);}#s2{background-image:linear-gradient(toright,blue,blue100%);背景位置：050%；背景重复：重复-x；background-size:100%7px;}#s3{border-bottom:8pxsolidred;显示：内联块；高度：26px；}#s4{位置：相对；}#s4：之后{内容：“”；位置：绝对；左：0；顶部：26px；显示：块；宽度：100%；border:5pxsolidyellow;}第一种使用linear-gradient来实现从上到下的渐变效果，通过属性巧妙的实现了锐变的效果。第二种与第一种类似，仍然依赖于渐变效果，但它是从左到右实现的。它比第一个更可调。种类多一点。第三个也是一个很好用的比较多的方法。不多解释。看到这里，小伙伴们有没有发现问题呢？有一天，设计师过来说，为什么你的线在文字后面，不是让你把那段文字划掉吗？？？这很尴尬。这里我要介绍第四种，哈哈哈，通过:after或者:before。元素相对定位，伪类绝对定位，设置边框实现覆盖文字的效果。好了，到这里了。文笔很烂，CSS一直是我的软肋。希望能帮到有需要的人~
