标签: linear-gradients

在 CSS 中，线性渐变 css 看起来像：

   background-image: linear-gradient(blue, lightblue);

这从蓝色开始渐变，以浅蓝色结束。实际上并不漂亮，但它可以作为一个例子。

现在，如果您只有起始颜色怎么办？如果您从传递的颜色参数开始（假设它是在 MVC ViewModel 中传递的），该怎么办？例如，您可能已经传递了一个 'red' 值，并且您想要从那个起始的 'red' 到一些稍微浅一点的红色的线性渐变来制作一个漂亮的渐变？

您是否需要知道或将“红色”转换为十六进制值，然后通过操纵十六进制数生成渐变停止颜色？有没有“正常”的方法来做到这一点？IE

1. 将“红色”转换为十六进制值的一些技巧，例如 #A11634
2. 一些技巧来应用一些数学来“使 A11634 的颜色更浅”？

或者

3. 一些渐变技巧来自动创建一种颜色的渐变，到该颜色的较浅版本？

我有几个<li>内联列出，每个都有以下属性：

border-bottom-color: #eee;

我试图第一个和最后一个目标<li>并填充它们border-bottom，#eee但只填充一半。结果，第一个的底部边框<li>将从右侧开始填充 50%，最后一个的底部边框<li>将从左侧开始填充 50%。

我怎样才能做到这一点？除了可能只是height: 1px在我的ul.

我想知道 Chrome 中是否有解决线性渐变背景错误的方法。

在我的上一个项目中，我使用了线性渐变作为按钮的背景。在悬停时有背景转换，它在这个地方推动了一个白色背景并拉出了一个蓝色背景。简单的效果，通过将 background-size 设置为 200% 然后在悬停时更改 background-position 来实现。

在下面的代码片段中，至少在 Chrome 上（在 FF、Safari 和 IE 中没有错误），您可以理解我的意思。这个错误仍然存​​在，使渐变的蓝色部分可见（右侧 1px），而在悬停时，这 1px 被白色部分填充。

我观察到，例如，当text-transform: uppercase未设置时，则没有问题。另一方面，在浏览器中使用缩放工具，在某些断点处设置间隙可见，反之亦然。

有人可以向我解释这种奇怪的行为吗？

button {
  position: relative;
  padding: 10px 15px;
  background-color: #fff;
  background-image: linear-gradient(to left, #fff, #fff 50%, #003b7c 50%, #003b7c);
  background-size: 200% 100%;
  background-position: 100%;
  font-weight: bold;
  color: #003b7c;
  text-transform: uppercase;
  outline: none;
  border: 2px solid #003b7c;
  border-radius: 0;
  transition: .25s ease-in;
}

button:active,
button:focus {
  padding-top: 12px;
  padding-bottom: 8px;
}

button:hover {
  color: #fff;
  background-position: 0 …

我正在尝试仅使用 CSS 在单个元素上创建特定的背景图案。下图显示了我想要的最终结果：

我可以使用以下命令创建重复的水平条纹：

  background-image: repeating-linear-gradient(
                  to bottom,
                  #f7f7f8 0,
                  #f7f7f8 32px,
                  rgba(255, 255, 255, 0) 32px,
                  rgba(255, 255, 255, 0) 64px
  );

但我正在努力将其与右侧的垂直条结合起来。我什至不确定是否有可能实现我想要的......它需要：

• 距右侧边缘的设定距离（以像素为单位）
• 是固定宽度，以像素为单位
• 完全覆盖下面的水平网格，即。无论底层颜色如何，它都应该是相同的颜色 - 无透明度。

这可能吗？

我想要一个响应式棋盘格背景，它应该看起来像颜色选择器中的背景：

我试过的：

.chess {
  background-image: 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px);
  background-position: 0 0, 0 30px, 0 60px, 0 90px, 0 120px;
  background-repeat: repeat-x;
  background-size: 60px 30px;
  height: 150px;
  margin: 15px auto;
  width: 30%;
}


.fas {
  text-align: center;
  font-size: 10em
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> …

所以，我已经四处寻找并尝试了几件事，但我只是想创建一条垂直虚线。类似于如果你做了边框虚线。

我得到的关闭：

background: linear-gradient(transparent, #ffffff) no-repeat 80%/2px 100%, linear-gradient(#000, #000) no-repeat 80%/2px 100%;

JSFiddle：https ://jsfiddle.net/m9wtrdgz/

是的，我希望这条线位于 80% 的位置；]

我试图做一个文本显示CSS动画像这一个。使用::before和::after似乎是一种过于复杂的方法，因此我尝试使用线性渐变背景颜色、背景位置或其他可能更简单的方法来执行此操作。

:root {
  --primary-rgba: rgba(17,184,106,1);
  --secondary-rgba: rgba(255,255,255,1);
}

@keyframes slidein {
  0% {
    background: transparent;
  }
  25% {
    background: linear-gradient(90deg, var(--secondary-rgba) 0%, var(--secondary-rgba) 50%, var(--primary-rgba) 50% var(--primary-rgba) 100%); 
  }
  50% {
    background: var(--secondary-hex);
  }
  75% {
    background: linear-gradient(90deg, var(--primary-rgba) 0%, var(--primary-rgba) 50%, var(--secondary-rgba) 50% var(--secondary-rgba) 100%); 
  }
  100%   {
    background: transparent;
  }
}

我什至想知道向动画添加更多帧是否会使其按照我想要的方式工作，并尝试在一堆（重复）帧中进行黑客攻击。仍然没有运气。

在发现CSS 过渡可能还不支持渐变之后，我尝试使用背景位置来显示文本，但没有成功。

这些方法中的任何一种都可行吗？

所以我试图改变文本的背景和正文。我生成 4 种不同的颜色，其中两种用于主体的背景渐变，另两种用于文本。

我使用以下代码计算随机十六进制值：

  newbg1 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbg2 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbgtext1 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbgtext2 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);

（对于这里缺乏合理的变量名称，我深表歉意）

之后，我执行以下检查，以确保这些确实是完整的 6 位十六进制代码，前面有一个“#”。

if(newbg1.length<7 || newbg2.length<7||newbgtext1.length<7||newbgtext2.length<7)
    onclick();

如果任何生成的代码不是这些长度，我会调用函数本身来生成新的十六进制代码。

然而，这是我遇到问题的地方。虽然代码是随机生成的，但很多时候看起来渐变并不存在，而是纯色。我认为这是因为选择了相同的颜色（极不可能，但并非不可能）。

因此我添加了另一个 if 语句来检查颜色是否相同。

if(newbg1 == newbg2 || newbgtext2==newbgtext1 || newbg1 == newbgtext1 || newbg1 == newbgtext2 || newbg2 += newbgtext1 || newbg2 == newbgtext2)
     onclick();

但这仍然无法解决问题。经过一番尝试和错误后，我得出的结论是颜色相似但不相同。

我需要一种方法来识别两个给定的十六进制值是否彼此相似以及它们相似的程度。我还想知道 2 个十六进制颜色的最小差异必须是多少才能获得可辨别的渐变。

我还将添加以下完整的 JS 代码：

var bg = document.getElementById("bg");
var inv = document.getElementById("inv");
var textbg …

下面是我要构建的用户界面，

目前，我已经使用线性渐变来实现这一点。但问题是当我在 Box Decoration 中使用 image 时，线性渐变消失了。

下面是代码，

    child: Container(
                      padding: EdgeInsets.all(10.0),
                      height: 180,
                      child: Container(
                        padding: EdgeInsets.all(10.0),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(20)),
                          boxShadow: [
                            BoxShadow(
                              color: ColorSet.primaryGrey,
                              blurRadius: 5,
                              offset: Offset(0, 7),
                            ),
                          ],
                          gradient: LinearGradient(
                            colors: [ColorSet.primaryRed, Colors.transparent, Colors.transparent, ColorSet.primaryRed],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            stops: [0, 0, 0.6, 1],
                          ),

//On uncommenting the below three lines, I do not see the linear gradient
                          // image: DecorationImage(
                          //   image: AssetImage("lib/assets/images/event.jpg"),
                          //   fit: BoxFit.cover,
                          // ),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween, …

我有这个CODEPEN，这是我的问题：

我不明白为什么我应用并引用为我的蒙版填充的渐变无法如此渲染。它应该从完全不透明变为完全透明。对于渐变，我使用的是：http : //angrytools.com/gradient/?0_800080,100_450045&0_0,100_100&l_180：

  <mask id="myMask" x="0" y="0" width="100%" height="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" />
  </mask>

另外，我不明白为什么要从use元素中删除fill =“ blue”属性，如下所示：

 <use xlink:href="#myText" mask="url(#myMask)" />

文本显示为黑色，好像没有应用渐变。我定义的渐变是紫色。

谢谢！