纯css实现多行文本框内的斑马条纹效果-一一网

这是我参与更文挑战的第13天，活动详情查看：更文挑战

前言

事情要从今天工作群里产品的一句用户体验来说起，竟然说用户反馈我们某个产品的可拉伸的文本框内文本换行不明显，用户体验非常不好。大概样子就如下图这样的文本框：

我心想，这™还不明显？再说都做成文本框了，也输不了多少字，谁还在乎换行明不明显？但是产品还是想要我临时给搞一下这个问题，大概要借此表现他的工作积极性。端午节还想要我搞这个小问题？于是我说这个问题涉及的地方比较多，看似只加个背景框，实则要考虑文字和背景的组合，还要考虑兼容性巴拉巴拉…假期过了上班再弄吧！但是只要牵涉到用户体验，领导都很重视，于是领导说，临时加下班给我算半天调休，呵~ 半天调休就想收买我？这种小问题，我两分钟，两行关键代码就搞定，换半天调休貌似也不亏~ 于是 ~~我极其不情愿的~~ 答应了下来。

思路

想要实现多行文本框的斑马条纹，我首先想到的就是css的 linear-gradient 属性，对于这个属性，我在前面一篇文章如何把css渐变背景玩出花样来有较为详细的介绍，可以移步参考一下。

斑马条纹无非就是背景渐变颜色的交替展示，然后文本的行高要和背景渐变颜色高度对齐，

这不就两行代码？我三下五除二就写出了如下代码：

    <style>
        textarea{ 
            fongt-size: 16px;
            line-height: 1.5em;
            background-image: linear-gradient(rgb(255 152 0) 50%, rgb(0 188 212) 0);
        }
    </style>
    <textarea rows="10" cols="50">
        南极大冰块 · ? 掘金高级摸鱼师

        精通摸鱼、划水、
        坐着睡觉、拍马屁、吹牛、
        甩锅、吵架等前端开发必备技能~
    </textarea>	
复制代码

运行一看，效果如下：

这？看起来不是两行代码就能解决的。再看一遍我上面的代码，突然明白，忘了给背景图像限制大小了，于是我又加了一行代码，如下：

    <style>
        textarea{ 
            fongt-size: 16px;
            line-height: 1.5em;
            background-image: linear-gradient(rgb(255 152 0) 50%, rgb(0 188 212) 0);
            background-size: 100% 3em;
        }
    </style>
    <textarea rows="10" cols="50">
        南极大冰块 · ? 掘金高级摸鱼师

        精通摸鱼、划水、
        坐着睡觉、拍马屁、吹牛、
        甩锅、吵架等前端开发必备技能~
    </textarea>	
复制代码

运行效果如下：

GIF 2021-6-13 16-30-17.gif

妙啊~

任务到此可以结束了，不过我们还要考虑以后是否会有迭代的可能性，在其他地方是否会有添加多个斑马条纹背景色的需求。如果后需要改成动态的，我们保证背景图像的高度为单个循环的背景色总高度即可，所以只需要添加一小段js控制斑马条纹颜色行数及颜色即可实现。比如：

    <textarea rows="10" cols="50">
        南极大冰块 · ? 掘金高级摸鱼师

        精通摸鱼、划水、
        坐着睡觉、拍马屁、吹牛、
        甩锅、吵架等前端开发必备技能~
    </textarea>	    

    <script>
        function setBG(arr){
            let lgs = arr.map((item,index)=>{
                let color = ''
                if(index === 0){
                    return `${item} ${((1/arr.length)*(index+1)*100).toFixed(2)}%`
                }else if(index === arr.length-1){
                    return `${item} 0`
                }else{
                    return `${item} 0 ${((1/arr.length)*(index+1)*100).toFixed(2)}%`
                }
            })  
            document.querySelector('#text').style = `
                line-height: 1.5em;
                background-image: linear-gradient(${lgs.toString()});
                background-size: 100% ${1.5*arr.length}em;
            `
        }

        let bgs = ['#FFCC66','#FF9966','#FFFF66','#FFCC99','#FFCCCC']
        setBG(bgs)
    </script>
复制代码