标签: linear-gradients

我试图用底部的渐变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;
}

谢谢!

我想知道是否有可能将 linearGradient 设为across (from top to bottom)直线，而不是下面的示例中渐变along (from left to right)为直线的示例。

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="210" x2="460" y2="210" gradientUnits="userSpaceOnUse">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="210" stroke="url(#e)" stroke-width="30" />
</svg>

更改 y 坐标对于未旋转的线非常有效，linearGradient 现在穿过（从上到下）线：

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="195" x2="40" y2="225" gradientUnits="userSpaceOnUse">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="210" stroke="url(#e)" stroke-width="30"/> 
</svg>

但不适用于旋转： …

我试图使用线性渐变在纯 css 中复制此图像。

我尝试使用渐变色块，但所有颜色都在混合。有什么方法可以使线性渐变成为硬边？

我试过了：

  background-image: -webkit-linear-gradient(left, #252525 0%, #f5f5f5 20%, #00b7b7 40%,#b70000 60%, #fcd50e 80%);

并且也没有使用这些百分比，仍然相同。

我有一个带有<symbol>trhat的 svg 精灵，其中包含一个<linearGradient>. 我在提出<g>这个相同的<symbol>这一梯度的fill="url(#id)"。但是，当我在其他文档中加载<symbol>with<use>时，<linearGradient>不会加载。我可以看到填充的 url 指的是绝对路径而不是文档内部，并且没有正确加载。

如何<linearGradient>在 a 中加载a <symbol>？

<symbol viewBox="0 0 550 90" width="100%" height="100%">
    <defs>
        <linearGradient id="gradient">
            <stop offset="-1.04974" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.549739" stop-color="#EEEEEE">
                <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.0497395" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite"></animate>
            </stop>
        </linearGradient>
    </defs>
    <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" …

我想创建一个闪耀加载动画，它将出现在具有不同背景颜色的多个元素上。

目前，我正在使用background-image渐变并为background-position使用vw单位设置动画，但它不可扩展，我的元素将具有不同的长度。

有没有办法background-image用百分比单位制作动画？

创建的动画

body {
  background: black;
}

header {
  width: 100%;
  height: 50px;
  background-color: rebeccapurple;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: -100vw;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    background-position: -100vw;    
  }
  100% {
    background-position: 100vw;   
  }
}

<header></header>

我一直在寻找一种使用 css 添加垂直线作为 div 背景的方法，但我在任何地方都找不到这个！

理想情况下，我想要一个 100vh 的 div，并且它有 5 条均匀分布的垂直灰线作为背景。然后我希望能够覆盖信息 - 所以希望这可以通过背景图像来完成？

这是我发现的但很难操纵它的东西

.lines {
  min-height: 100vh;
  background-image: linear-gradient(90deg, transparent, transparent calc(100% / 3), black calc((100% / 3) + 1px), transparent calc((100% / 3) + 1px)), linear-gradient(90deg, transparent, transparent calc((100% / 3 * 2) - 1px), black calc(100% / 3 * 2), transparent calc(100% / 3 * 2));
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

<div class="lines">
</div>

这是我从中获得的 codepen 的链接.. https://codepen.io/redmile/pen/XgZeOX

信息：我正在使用 pygame 绘制一个矩形，但希望将渐变添加到矩形中，使其看起来有阴影。

现在这是我的代码：

light_green = (0, 255, 0)
dark_green = (0, 100, 0)

pygame.draw.rect(screen, light_green, rect_dims) # Draws a rectangle without a gradient

问题：我想在浅绿色和深绿色之间创建线性过渡，而不绘制一堆彼此堆叠的线条（因为这非常慢），那么有没有一种方法可以使用pygame？

这是我的代码。我认为我想要实现的目标相当明显 - 我想删除文本后面的黑色背景，但是，当我简单地删除黑色背景 css 时，渐变层只会显示，因为它没有剪切到文本。

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:url('https://wallpapersite.com/images/pages/pic_w/16658.jpg') no-repeat center center fixed;
    background-size: cover;
}

.neon {
    position: relative;
    overflow: hidden;
    filter: brightness(200%);
}

.text {
    background-color: black;
    color: white;
    font-size: 100px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative;
    user-select: none;
}

.text::before {
    content: attr(data-text);
    position: absolute;
    color: white;
    filter: blur(0.02em);
    mix-blend-mode: difference;
}

.gradient {
    position: absolute;
    background: linear-gradient(45deg, #00f7ff, #f545d7, #0085ff, #6945f5, #005aff);
    top: 0;
    left: …

我正在尝试添加带有渐变颜色的侧面导航栏，效果很好。但是，我还将列表图块（仪表板）的悬停颜色设置为红色，但当我悬停时它没有显示。

我猜测悬停时侧导航的背景颜色覆盖了列表图块的颜色。关于如何修复它有什么想法吗？谢谢！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(builders: {
          TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
          TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
        }),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Drawer(
          elevation: 0,
          child: Container( …

我试图做到这一点，以便当您滚动经过页面的顶部和底部时，我在正文上使用的背景渐变显示在正文的边缘之外。

是否有可能做到这一点？

我尝试过在根元素上设置background-image和background样式属性<html>，但似乎都没有超出正文传统结束位置的边缘。

请注意，这是在<html>标签上，而不是<body>标签上，而且由于过度滚动的工作方式，jsfiddle 似乎无法正确重现该问题。

这是一个复制示例（将其复制到index.html文件中进行测试）。我也用 试过了background-image，效果是一样的。

<html style="background: linear-gradient(180deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);">
</html>

下面是它的 .gif：

这是一个 .gif，其中已在 上设置了静态颜色<html>，并在 上设置了渐变<body>：

就像这样：

<html style="background-color: red">
    <body style="margin: 0; background: linear-gradient(180deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);">
    </body>
</html>

我提供了垂直渐变的示例，以匹配关闭期间请求的示例，但我主要感兴趣的是在页面上方和下方扩展水平渐变。