之前的实践中我们了解并熟悉了background-size,以及backgroud-clip,今天我们学习并实践的是线性渐变linear-gradient.
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>
数据类型,是一种特别的<image>
数据类型。
linear-gradient([<angle> | to <side-or-corner>]? , <color-stop-list>)
这个函数(特性)接受的第一个参数是渐变的角度,他可以接受一个表示角度的值(可用的单位deg、rad、grad或turn)或者是表示方向的关键词(top、right、bottom、left、left top、top right、bottom right或者left bottom)。第二个参数是接受一系列颜色节点(终止点的颜色)。
其本身没有单独容器概念,大小只能是元素的border-box.不能选择性的线性渐变内容盒等。
默认值 to bottom 等于 180deg,如果是目标的效果可以不再额外设置。渐变夹角为元素中心点垂直线与渐变线之间形成的夹角。(借用大漠老师的图)
特别备注: 1:这里的夹角不是与水平线的,我当初也以为是水平夹角; 2.就是如果你希望渐变线到元素的右上角部分,这个部分不一定是45deg,而关键字设置的top right 一定是右上角。
sin(a)*w+cos(a)*h
.
l1=h/2/cos(a);
l2=d2*sin(a);
d2=w/2-d1;
d1=l1*sin(a);
最终计算 l=2*(l1+l2)=w*sin(a)+h*cos(a);
渐变节点语法:<color> [<percentage> | <length>]?
,每一个渐变点都可以控制其开始的位置,如果你不设置那么会按照起止进行等分过渡。可以参考我的demo截图。
大部分现代浏览器支持这一特性,你可以采用auto-prefix模块支持这个hack的部分。
在我们的案例中,我们需要实现的场景是实现中划线背景但是内容区保持无线。
实现思路很简单,利用线性渐变实现背景的黑色线条,通过位置控制线条的粗细。
h2{
text-align:center;
line-height:50px;
background:linear-gradient( transparent 49%,#000 49%,#000 51% ,transparent 51%);
span{
padding:0 10px;
background:#fff;
}
}
我之前的场景的话,也是类似的思路不过是利用的一个线性背景做x方向的重铺,然后中间也是用span标签做白色背景。 – 这种方案的缺点可能是什么?不考虑兼容
可能的问题有以下几个方面吧:1 背景不是线性渐变可以实现的,还是需要背景图去做 ;2 如果文字有两行或者更多怎么实现 3 元素背景是透明的时候,span的背景会映射线条,如果也设置透明,会有透明效果叠加; – 还有什么方案可以尝试?
这里建议给大家一种flex的布局方案也可以实现,布局更为常规,利用了flex弹性盒的原理,当然横线背景也是渐变,但span部分没有渐变也没有背景色覆盖。代码如下:其中flex:1就是实现利用剩余时间的。
<h2 class="flex-demo">
<span class="line"></span>
<span class="title">立即注册</span>
<span class="line"></span>
</h2>
.flex-demo{
display:flex;
texxt-align:center;
.line{
background:linear-gradient( transparent 49%,#000 49%,#000 51% ,transparent 51%);
flex:1
}
.title{
}
}