首页 > 其他分享 >css_repeating-linear-gradient

css_repeating-linear-gradient

时间:2024-10-31 15:42:10浏览次数:5  
标签:linear gradient -- background 10px var repeating

  • 在不指定背景颜色渲染区间的情况下, repeating-linear-gradientlinear-gradient的没有区别
<div class="test test1"></div>
<div class="test test2"></div>
.test {
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  display: inline-block;
}
.test:not(.test:nth-of-type(1)) {
  margin-left: 10px;
}
.test1 {
   background-image: linear-gradient(90deg, var(--red),var(--blue));
}
.test2 {
  background-image: repeating-linear-gradient(90deg, var(--red), var(--blue));
}

  • 对于linear-gradient而言, 如果设定的背景颜色没有覆盖整个渲染界面, 那么剩下的空白区域将由最后一个颜色进行填充; 但对于repeating-linear-gradient, 如果设定的背景颜色没有覆盖整个渲染界面, 那么则在剩下的区域里对已经渲染好的背景执行重复渲染
<div class="test test3"></div>
<div class="test test4"></div>
.test3 {
  background-image: linear-gradient(90deg, var(--red) 0% 20%, var(--blue) 20% 40%);
}
.test4 {
  background-image: repeating-linear-gradient(90deg, var(--red) 0% 20%, var(--blue) 20% 40%);
}

background-repeat的不同

  • 在横向或者纵向渲染时, linear-gradientbackground-repeat,background-size配合同样可以达到repeating-linear-gradient的效果
<div class="test test5"></div>
<div class="test test6"></div>
<div class="test test7"></div>
<div class="test test8"></div>
.test5 {
  background-image: linear-gradient(90deg, var(--red) 0 10px, var(--blue) 10px 20px);
  background-size: 20px 150px;
  background-repeat: repeat-x;
}
.test6 {
  background-image: repeating-linear-gradient(90deg, var(--red) 0 10px, var(--blue) 10px 20px);
}
.test7 {
  background-image: linear-gradient(180deg, var(--red) 0 10px, var(--blue) 10px 20px);
  background-size: 150px 20px;
  background-repeat: repeat-y;
}
.test8 {
  background-image: repeating-linear-gradient(180deg, var(--red) 0 10px, var(--blue) 10px 20px);
}

  • 但是在非纵向或者横向的情况下, 想要通过background-repeat实现repeating-linear-gradient的效果出现了偏差, 因为使用background-repeat时需要设定background-size, linear-gradient的方向是以background-size区域单独划定的, 而repeating-linear-gradient的方向是整个渲染区域, 因此会出现以下情况:
<div class="test test9"></div>
<div class="test test10"></div>
.test9 {
  background-image: repeating-linear-gradient(-45deg, var(--red) 0 10px, var(--blue) 10px 20px);
}
.test10 {
  background-image: linear-gradient(-45deg, var(--red) 0 10px, var(--blue) 10px 20px);
  background-size: 20px 150px;
  background-repeat: repeat-x;
}

标签:linear,gradient,--,background,10px,var,repeating
From: https://www.cnblogs.com/lei0906/p/18517976

相关文章

  • 梯度下降(Gradient Descent)详解
    梯度下降(GradientDescent)详解梯度下降是一种优化算法,广泛应用于机器学习和深度学习中,用于最小化损失函数,即通过调整参数来减少模型错误的方法。梯度下降的核心思想是:通过计算损失函数的梯度(即导数),然后沿着梯度下降的方向更新模型的参数,以达到减少损失的目的。基本原理......
  • abc248E K-colinear Line
    给定二维平面上的N个不同的点,坐标分别为(X[i],Y[i]),问存在多少条直线穿过至少K个点?1<=K<=N<=300;|X[i]|,|Y[i]|<=1E9分析:最多只有300个点,可以枚举所有点对构成的直线,用斜率和截距表示,为了避免精度问题,两者用分数来表示。注意,平行与x轴和y轴的直线要特判处理。#include<bits/std......
  • R语言机器学习算法实战系列(五)GBM算法+SHAP值 (Gradient Boosting Machines)
    禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者!文章目录介绍教程下载数据加载R包导入数据数据预处理数据描述数据切割调节参数构建模型预测测试数据评估模型模型准确性混淆矩阵模型评估指标ROCCurvePRCCurve特......
  • 基于离群点修正、优化分解和DLinear模型的多步风速预测方法
    翻译与总结:基于离群点修正、优化分解和DLinear模型的多步风速预测方法翻译:本文提出了一种结合离群点修正、启发式算法、信号分解方法和DLinear模型的混合风速预测模型。该模型包括三个主要步骤:首先,通过 HampelIdentifier(HI) 检测并替换风速序列中的离群点,以减少其对预测......
  • 时间序列预测(一)——线性回归(linear regression)
    目录一、原理与目的1、线性回归基于两个的假设:2、线性回归的主要目的是:二、损失函数(lossfunction)1、平方误差损失函数(忽略了噪声误差)2、均方误差损失函数三、随机梯度下降(通过不断地在损失函数递减的方向上更新参数来降低误差。)四、代码实现参考文章:机器学习—线......
  • YOLOv11改进 | 独家创新- 注意力篇 | YOLOv11引入GAM和LinearAttention结合之LGAM注意
    1.LGAM介绍     LGAM(LinearGlobalAttentionModule)和GAM(GlobalAttentionModule)是两种用于图像特征提取的注意力机制。它们在设计上有一些显著的差异,这使得LGAM在某些方面比GAM更具优势。     LGAM的设计与改进:    (1).线性注意力机制的引......
  • DDA3020 Learning of Linear Regression
    DDA3020Homework1Duedate:Oct14,2024InstructionsThedeadlineis23:59,Oct14,2024.Theweightofthisassignmentinthefinalgradeis20%.Electronicsubmission:TurninsolutionselectronicallyviaBlackboard.Besuretosubmityourhomework......
  • 个人翻译Introduction to Linear Algebra, 5th Edition 10.2节(仅用于交流学习,非盈利)
    本书的翻译仅为交流学习!才疏学浅,不当的地方还望指正。请勿于其它用途!PDF文件 链接一:  https://pan.baidu.com/s/1ENKxfP_QJBaZHXlQ_xdxzw?pwd=9nej提取码:9nej 链接二:https://download.csdn.net/download/sinat_21706867/89817586以下只贴出本PDF截图 ......
  • NEKN96 Linear Regression
    HomeworkAssignment1LinearRegressionNEKN96GuidelinesUploadtheHWAin.zipformattoCanvasbeforethe2ndofOctober,23:59,andonlyuploadoneHWAforeachgroup.The.zipfileshouldcontaintwoparts:-Areportin.pdfformat,whichwillbe......
  • python 实现gradient boosting regressor梯度增强回归器算法
    gradientboostingregressor梯度增强回归器算法介绍梯度增强回归器(GradientBoostingRegressor,简称GBR)是一种集成学习算法,专门用于解决回归问题。它通过组合多个弱学习器(通常是决策树)来构建一个强大的预测模型。以下是关于梯度增强回归器算法的详细解释:原理梯度增强回......