标签: linear-gradients

我有两个具有不同渐变背景的div,我需要在它们之间创建一个S形曲线.

这是渐变div的示例小提琴:https://jsfiddle.net/JerryGoyal/rjyfc46c/2/

<div id="section1">

</div>
<div id="section2">

</div>
#section1{
  height:200px;
  background: linear-gradient(to bottom right, #ad3, #add);
}
#section2{
  height:200px;
  background: linear-gradient(to bottom right, #de350b, #0065ff);
}

我想到了几件事情,但是:

- svg:不知道如何处理其他渐变div.
- border-radius:无法获得真正类似S的曲线加上当我调整屏幕大小时它会变得难看.
- clip-path:某些浏览器不支持https://caniuse.com/css-clip-path
- png image: nope!需要是动态内容.

任何帮助,将不胜感激!

PS:未来读者必读:https://css-tricks.com/creating-non-rectangular-headers/

我正在尝试使用背景linear-gradient,但我希望步骤"更大".
例如,不是逐个像素地改变,而是改变每N个像素.

是否可以只用CSS做到这一点？

我对如何实现这一目标毫无头绪.所以我创建了这个SVG示例来模拟我想要实现的目标:

http://codepen.io/Goodwine/pen/fqgdB

要使用CSS,我需要手动插入每个颜色停止,在这种情况下我设置这个"颜色停止":

[{r: 0,   g: 0,   b: 0,   a: 1, p: 0.00},
{r: 100, g: 100, b: 255, a: 1, p: 0.25},
{r: 255, g: 200, b: 100, a: 1, p: 0.5},
{r: 255, g: 200, b: 200, a: 1, p: 0.7},
{r: 100, g: 100, b: 100, a: 1, p: 0.9},
{r: 0, g: 0, b: 0, a: 1, p: 1}]

我试图用底部的渐变alpha掩盖Bitmap.渐变大小是固定的,并且与位图大小无关.但它绘制不正确:顶部的渐变底部,而不是顶部.怎么了？

有示例代码:

final int GRADIENT_HEIGHT = 32;

public Bitmap addGradient(Bitmap src) {
    int w = src.getWidth();
    int h = src.getHeight();
    Bitmap overlay = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(overlay);

    canvas.drawBitmap(src, 0, 0, null);

    Paint paint = new Paint();
    LinearGradient shader = new LinearGradient(0, 0, 0, GRADIENT_HEIGHT, 0xFFFFFFFF, 0x00FFFFFF, TileMode.REPEAT);
    paint.setShader(shader);
    paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
    canvas.drawRect(0, h - GRADIENT_HEIGHT, w, h, paint);

    return overlay;
}

谢谢!

请看看这支笔:

http://codepen.io/troywarr/pen/VYmbaa

我在这里做的是:

• 定义SVG符号(<symbol>)
• 定义SVG线性渐变(<linearGradient>)
• 使用该<use>元素来引用我创建的SVG符号
• 在CSS中,定义两个类:
  • external,它引用在定义的线性梯度这个外部.svg文件(右键点击和查看源)
  • internal,它引用了本地HTML中定义的线性渐变(我相信,它实际上与外部文件中的相同)

因为我已将internal类应用于<svg>HTML示例底部的元素,所以应用渐变,呈现蓝色渐变复选标记.这就是我所追求的.

但是,如果您在HTML示例中切换internal类external,则不再显示复选标记:

http://codepen.io/troywarr/pen/vEymKX

当我观看Chrome Inspector的"网络"标签时,我看不到浏览器尝试加载SVG文件.我的语法有问题,还是其他的东西在这里？

根据我发现的一些参考资料,至少看起来我正在做这件事:

• http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
• http://www.w3.org/TR/SVG/linking.html#IRIReference
• /sf/answers/498269971/

但是,到目前为止我没有尝试过任何东西,这使我能够引用外部.svg文件中定义的线性渐变.

谢谢你的帮助!

我linear-gradient在一个特别大的元素上遇到了一个问题.

在较小的元件上,可以通过以下方式实现硬边缘:

background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);

然而,当元件具有非常大的高度时,边缘是柔软的.您可以在下面的图像和示例中看到,当元素非常大并且应用了相同的渐变时,第二个版本具有柔化边缘.

我已尝试过线性渐变的许多变化,并且无法在大版本上实现硬边缘.有没有办法在大元素上应用具有硬边的渐变？

HTML示例:

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
div:first-child {
  height: 100px;
}

<div></div>
<div></div>

编辑

此渐变的目标是与其他背景图像一起使用,因此我更喜欢与以下内容兼容的技术(不覆盖图像):

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: url(http://placehold.it/600x20), linear-gradient(180deg, #000, #000 20px, #0f0 0);
}

<div></div>

编辑2

感谢@Tarun,这似乎与浏览器有关.上图是Chromium 45的截图.Safari和Firefox似乎正确渲染.

编辑3

有关此问题的铬有一个公开的错误报告.

如果我的身体有以下 CSS 属性：

body {

 background-color: red;
 background-image: linear-gradient(red, orange);
}

然后渐变出现在我的网页上，但它没有占据全屏尺寸（我有一个大显示器）。它显示如下： 这是页脚的问题吗？我目前没有页脚。

我有CSS3的问题.我不知道如何制作像这样的对角圆形渐变边框:

我发现像这样:

.box {
  width: 250px;
  height: 250px;
  margin: auto;
  background: #eee;
  border: 20px solid transparent;
  -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
}

<div class="box"></div>

但不幸的是,这只适用于正方形.

任何帮助,将不胜感激.

有关如何更改2部分渐变线的文字颜色的任何想法？例如,如果我想要文本的蓝色部分('s','o'和'm'的一部分)是黑色的？

.button{
   background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
}

我有一个表有一个显示%值的列.为了使它更具视觉吸引力,我想显示一个与%值对应的线性渐变背景(例如,50%将填充单元宽度的一半).

我想出了如何制作渐变背景(使用ColorZilla的渐变生成器),但不知道如何设置背景填充的宽度....

当前代码:

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td width="100" style="background: linear-gradient(to right, rgba(0,150,0,1) 0%,rgba(0,175,0,1) 17%,rgba(0,190,0,1) 33%,rgba(82,210,82,1) 67%,rgba(131,230,131,1) 83%,rgba(180,221,180,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */">50%</td>
    </tr>
</table>

当在元素上使用时，我有以下闪光效果，效果非常好p，但它不适用于任何div元素，也不适用于img. 那么，我应该进行哪些修改才能确保闪光效果在任何元素上发挥作用。

片段如下

 .shimmer {
      display: inline-block;
      color:grey;
      background: #acacac -webkit-gradient(linear, 100% 0, 0 0, from(#acacac), color-stop(0.5, #ffffff), to(#acacac));
      background-position: -50rem top; /*50px*/
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation-name: shimmer;
      -webkit-animation-duration: 2.2s;
      -webkit-animation-iteration-count: infinite;
      -webkit-background-size: 50rem 100%; /*50px*/
      font-size: 90px;
    }
    
    @-webkit-keyframes shimmer {
        0% {
            background-position: -50rem top; /*50px*/
        }
        70% {
            background-position: 12.5rem top; /*200px*/
        }
        100% {
            background-position: 12.5rem top; /*200px*/
        }
    }

<div>
<p class="shimmer">Shimmering Text</p>

<div>
<img src="https://i.stack.imgur.com/MeQxk.png" …