首先绘制一个水平条纹图案 .bg{background-image:repeating-linear-gradient(#eee08px,transparent016px)} image-20220225142228336 然后绘制一个垂直方向上的条纹 .bg{ background-image: repeating-linear-gradient(#eee 0 8px, transparent 0 16px), repeating-linear-gradient(90deg, #eee 0 8px, transparent 0...
如果不加这个属性,就成了横条纹了,以此90deg就是竖条纹,可以组成花格条纹。 分析后面8个属性,总结出是由一个rgba颜色值和transparent外加百分比组成。 rgba颜色值是条纹的颜色,transparent其实也是颜色,不过是继承自父级的,而这里的父级颜色就是body的背景色(在这块代码里可以理解为无色透明≈rgba(0,0,0,0))。
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); //用线性渐变创建图像 rgba(0,0,0, 0.05) 40%和rgba(0,0,0, 0.10));分别为起始颜色和终止颜色,第一个参数一般是渐变方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角...
linear-gradient是CSS中用于创建线性渐变背景的函数。它允许你定义两种或多种颜色之间的平滑过渡,这些颜色会沿着一条直线均匀分布。线性渐变的方向可以是水平、垂直,或者任意角度。 在linear-gradient中使用透明色 在linear-gradient中,你可以使用透明色(transparent)作为渐变的一部分。透明色在这里意味着该部分的颜色将不...
也可以使用角度angle(如:7deg),在渐变规则中,0deg代表由左到右的渐变,90deg为从上到下的渐变。 transparent:使用透明度,用rgba( )定义颜色 #grad{background-image:linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,1)); } ▲从右到左的线性渐变,由完全透明过渡到不透明红色。
h2 { text-align:center; line-height:50px; background:linear-gradient( transparent 49%,#00049%,#00051% ,transparent 51%); span{ padding:010px; background:#fff; } } 发散思考 你之前的场景是如何实现的？我之前的场景的话，也是类似的思路不过是利用的一个线性背景做x方向...
background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); } ``` 在上面的例子中,使用linear-gradient函数的参数来定义了一个从完全透明到50%透明黑色的线性渐变背景。 需要注意的是,linear-gradient函数还可以接受其他类型的参数来进一步定义渐变的形状和样式。例如,可以使用关键字(如to top)指定渐变的...
.linear-gradient--transparent { background-image: linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1) ); } /* 重复线性渐变 */ .repeating-linear-gradient { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); ...
background:linear-gradient( transparent 49%,#00049%,#00051% ,transparent 51%); span{ padding:010px; background:#fff; } } 发散思考 你之前的场景是如何实现的? 我之前的场景的话,也是类似的思路不过是利用的一个线性背景做x方向的重铺,然后中间也是用span标签做白色背景。
因为ios不支持transparent表示的透明,以下代码会表现出黑底 background: linear-gradient(transparent, rgba(255, 255, 255, 1) 50%); 可以使用 rgba(255, 255, 255, 0)表示透明 background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255, 1) 50%); ...