linear-gradients 相关问题

计算二维角度线性渐变上特定点的颜色

我需要计算具有指定宽度、长度、开始和结束颜色以及特定角度的线性渐变上像素的颜色。 经过几天的研究并试图了解

文本的几个词具有线性渐变颜色 - React native

我想要一些线性渐变颜色的文本。检查所需的输出 为了实现我正在做的渐变文本 - 从“反应”导入反应； 从'react-native'导入{Text}； 导入 LinearGra...

如何在 CSS 中的无缝背景图像上使用不透明度等效线性渐变

我想在 CSS 中做这件事： 分区{ 背景：线性渐变（到顶部，rgba（255,0,0,0），rgba（255,0,0,1），rgba（255,0,0,0））； 宽度：1000px； 高度：1000px； } 你好... 我想在 CSS 中做这件事： div { background: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); width: 1000px; height: 1000px; } <div>hello</div> 但不是颜色，我想要渐变淡入淡出背景图像，像这样： background: linear-gradient(to top, transparent, url(/myimage.png) repeat, transparent); 如何在 CSS 中完成这个，或者如果在 CSS 中不可能，在 JS 中。 我的图像是无缝纹理，所以也许这可能会影响等式，因为它是重复的。我还想将 background-size 设置为不同的大小来弄清楚，所以如果你也可以指定它，那就太好了。 可以考虑mask来做这个。您可以指定与背景相同的属性，因此您可以轻松定义渐变。 .box { width: 1000px; height: 1000px; position:relative; z-index:0; } .box:before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:url(https://picsum.photos/id/42/10/10); -webkit-mask-image:linear-gradient(to top, transparent, #fff, transparent); mask-image:linear-gradient(to top, transparent, #fff, transparent); } <div class="box">hello</div> 或者你可以使用多个背景来模拟这个。你不会有透明度，但你会得到更好的支持： .box { width: 1000px; height: 1000px; background: linear-gradient(to top,#fff, transparent, #fff), url(https://picsum.photos/id/42/10/10); } <div class="box">hello</div> background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(your-image-url.jpg); background-blend-mode: overlay;

如何在TextView中设置对角渐变效果？

如何在 Android TextView 中应用对角线渐变效果。我想创建一个如下图所示的 TextView 渐变效果。

输入标签的边框渐变？以及如何禁用自动完成？

我正在尝试做一个“待办事项列表”。但是遇到了这个问题。 （实际上有两个）。 我的输入框没有边框渐变，即使它是正确的。 我真的很想拥有

如何在 <symbol> 标签中将线性渐变应用于 SVG <use>？

我的 HTML 文件中有这些行： 我的 HTML 文件中有这些行： <div class="account-container"> <svg id="icon-account" style="width: 5rem; height: 5rem;"> <use href="/icons.svg#icon-account" /> </svg> </div> icons.svg 看起来像这样： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="gradient1" x1="21.3635" y1="1.72727" x2="21.3639" y2="41" gradientUnits="userSpaceOnUse"> <stop stop-color="#7DC2C9"/> <stop offset="1" stop-color="#446B73"/> </linearGradient> <symbol id="icon-account" viewBox="0 0 42 42" > <path d="M6.09091 34.3314C10.9277 29.4164 15.2241 27.245 21 27.1818C27.3352 27.4877 31.7332 29.4904 36.2727 33.9136M41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21ZM26.4545 15.1818C26.4545 18.1943 24.0125 20.6364 21 20.6364C17.9875 20.6364 15.5455 18.1943 15.5455 15.1818C15.5455 12.1694 17.9875 9.72727 21 9.72727C24.0125 9.72727 26.4545 12.1694 26.4545 15.1818Z" fill="none"/> </symbol> </defs> </svg> 我想在图标上应用#gradient1。在 SVG 文件的路径上或在 CSS 中使用 stroke=url(#gradient1) 设置笔划不起作用，图标根本不呈现。 在 HTML 文档本身中包含以下 SVG defs 允许引用渐变然后它起作用： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <linearGradient id="gradient1" x1="21.3635" y1="1.72727" x2="21.3639" y2="41" gradientUnits="userSpaceOnUse" > <stop stop-color="#7DC2C9" /> <stop offset="1" stop-color="#446B73" /> </linearGradient> </defs> </svg> 但是，我想避免用 SVG 定义污染 HTML，并将所有 SVG 相关代码保存在单独的 icons.svg 文件中。 如何将渐变应用于此图标？ 谢谢！ 似乎是一个 Chrome 错误，可能是臭名昭著的 问题 109212：SVG（filter | fill […]）来自 2012 年未应用的外部文件；在相关问题中找到：defs中的渐变未显示在Chrome的SVG精灵中。 <svg style="width: 5rem; height: 5rem;"> <use href='data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gr"> <stop offset=".2" stop-color="red" /> <stop offset=".8" stop-color="blue" /> </linearGradient> <symbol id="icon" viewBox="0 0 8 8" > <path d="M0 0 L 8,0 8,8 0,8 Z M 2,2 L 6,2 6,6 2,6 Z" fill="url(%23gr)" stroke="gold" /> </symbol> </defs> </svg>#icon' /> </svg> 本示例代码使用dataURI 模拟外部资源。在 Firefox 中，它会正确呈现金色描边和红蓝渐变填充，但在 Chrome 中，只有描边是可见的。 对于奇偶校验，具有 defs 的相同 SVG 直接放置在 HTML 中，适用于两种浏览器： <svg style="width: 5rem; height: 5rem;"> <use href='#icon' /> </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gr"> <stop offset=".2" stop-color="red" /> <stop offset=".8" stop-color="blue" /> </linearGradient> <symbol id="icon" viewBox="0 0 8 8" > <path d="M0 0 L 8,0 8,8 0,8 Z M 2,2 L 6,2 6,6 2,6 Z" fill="url(#gr)" stroke="gold" /> </symbol> </defs> </svg> 并且独立的 SVG 加载到图像中，证明相同的真实 SVG 中的引用（不是 SVG-in-HTML）在两种浏览器中都有效。 <img src="data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1'> <defs> <linearGradient id='gr'> <stop offset='.2' stop-color='red'/> <stop offset='.8' stop-color='blue'/> </linearGradient> <symbol id='icon' viewBox='0 0 8 8'> <path d='M0 0 L 8,0 8,8 0,8 Z M 2,2 L 6,2 6,6 2,6 Z' fill='url(%23gr)' stroke='gold'/> </symbol> </defs> <use href='%23icon'/> </svg>"></img> 我遇到了类似的问题，将 SVG 代码直接粘贴到 HTML 代码中，如下所示： <svg version="2.0" style="display: none;"> <defs> <linearGradient id="gradient1" x1="21.3635" y1="1.72727" x2="21.3639" y2="41" gradientUnits="userSpaceOnUse"> <stop stop-color="#7DC2C9"/> <stop offset="1" stop-color="#446B73"/> </linearGradient> <symbol id="icon-account" viewBox="0 0 42 42"> <path fill="url(#gradient1)" d="M6.09091 34.3314C10.9277 29.4164 15.2241 27.245 21 27.1818C27.3352 27.4877 31.7332 29.4904 36.2727 33.9136M41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21ZM26.4545 15.1818C26.4545 18.1943 24.0125 20.6364 21 20.6364C17.9875 20.6364 15.5455 18.1943 15.5455 15.1818C15.5455 12.1694 17.9875 9.72727 21 9.72727C24.0125 9.72727 26.4545 12.1694 26.4545 15.1818Z"/> </symbol> </defs> </svg> <svg version="2.0" style="width: 5rem; height: 5rem;"> <use href="#icon-account" /> </svg> 我通过使用定义从 SVG 中删除display: none; 来解决它： - <svg version="2.0" style="display: none;"> + <svg version="2.0" width="0" height="0"> <defs> ...

QLinearGradient pyqt5 不适用于 QLabel

在 qt 设计器中创建 QLabel 并设置样式表： 字体：粗体50px； 颜色：qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(13, 115, 119, 255), stop:1 rgba(78, 204, 163, 255 )); 布...

Safari 浏览器缩放 + 线性渐变问题

我正在使用 线性渐变（90deg，透明 0 47px，#000 47px 48px）； 背景大小（48px）； 在背景上绘制 1px 的垂直线。 它在任何地方都可以正常工作，在 Safari 中也是如此，

如何用css制作彩虹条纹渐变

如何在 CSS 中制作彩虹条纹？是这样的： 。条纹{ 背景：线性渐变（ 45度， RGBA(255, 0, 0, 1) 0%, RGBA(255, 154, 0, 1) 10%, rgba(20...

响应式棋盘图案背景

我想要一个响应式棋盘背景，看起来应该像颜色选择器中的背景： 我希望模式始终显示每宽度 N 个正方形（动态）。 我试过的...

背景图像：线性渐变在 Safari 中不起作用

我在网站的许多页面上都遇到了问题，但这里举一个例子：https://mypieceofcakemove.com/storage/ 在页面的英雄部分，我使用了 Avada 主题的选项来创建一个线性渐变......

固定背景线性渐变

我不确定我的问题是否有意义，但我试图让我的线性渐变在不同的屏幕尺寸上保持固定。 CSS属性是这样的 背景：线性渐变（向右，#00008B 19.5%，#

有没有办法使用 ::before 伪类旋转 CSS 元素以显示从 0 度到 360 度旋转的线性渐变？ [重复]

问题定义 我有一个 div 标签，它的 border-radius 为 50% 以显示一个圆圈。下面是 HTML 代码： .pie-wrapper { 高度：2.5em； 宽度：2.5em； 边距：15px 自动； 位置...

如何用颜色参数覆盖容器小部件的渐变颜色参数

我使用了容器小部件的渐变参数，它仅在条件为真时才显示渐变颜色，如果渐变颜色不是透明的。 异常输出：- 如果条件为假，则

Image 上的 LinearGradientBrush 不起作用，并且没有向底部变得更透明

我想加载一个图像，它基本上是一个非常暗的颜色，比如黑色 isch 颜色，并向它添加一个 LinearGradientBrush，这样它就可以在底部获得更多。 在网格中，我使用了一个图像并添加了...

如何结合 TypeScript 对象/记录类型、代码完成和 VSCode“转到定义”功能？

我正在结合反应本机、本机基础和线性渐变，看起来像这样： 我正在结合react native、native base和linear gradients看起来像这样： <Box bg={{ linearGradient: { colors: ['lightBlue.300', 'violet.800'], start: [0, 0], end: [1, 0], }, }} /> Native base 将此类型导出为 ILinearGradientProps。我的应用程序包含 15 个以上的线性渐变，需要在不同的组件中访问它们。我添加了一个 LinearGradients 对象，它看起来像这样但是填充了实际的道具（颜色，开始，结束）： import { ILinearGradientProps } from 'native-base'; type LGKey = 'primary' | 'secondary' | 'success' | ...; export const LinearGradients: Record<LGKey, ILinearGradientProps> = { primary: { ...linearGradientProps }, secondary: { ...linearGradientProps }, success: { ...linearGradientProps }, ... 随着上面的打字Record<LGKey, ILinearGradientProps>： 类型正确 定义LinearGradients属性时有代码补全 访问组件上的 LinearGradients 属性时也有代码完成，例如。 <Box bg={LinearGradients.pri 但是，直接在属性 Ctrl/Cmd + Click 上使用 LinearGradients.primary 或 VSCode（可能还有其他代码编辑器）的“转到定义”功能不起作用。如果 VSCode 可以将我定向到 LinearGradients 中的特定属性，那就太好了。 如果我将代码更改为如下所示，则转到定义功能有效，但它看起来不像是好的 TS 代码 IMO： export const LinearGradients = { primary: { ...linearGradientProps } as ILinearGradientProps, secondary: { ...linearGradientProps } as ILinearGradientProps, success: { ...linearGradientProps } as ILinearGradientProps, ... 有谁知道我如何让所有这四个功能一起工作（不用像上面那样用as断言每个新属性的类型）来实现： 安全/正确打字 定义LinearGradients属性时的代码完成 访问LinearGradients属性时的代码完成 转到 VSCode 上的定义功能 或者这只是 TypeScript 的局限性吗？ 这已经出现了几次，我在网上找不到太多关于这个的信息，所以非常感谢任何帮助。谢谢 // ts@>=4.9 export const LinearGradients = { primary: { ...linearGradientProps }, secondary: { ...linearGradientProps }, success: { ...linearGradientProps }, } satisfies Record<LGKey, ILinearGradientProps> https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator

使用 border-image 时如何防止边框出现在图像的顶角？

我正在使用 border-image 将线性渐变边框添加到图像的底部。 然而，图像的顶角也显示了边框，即使我只希望它出现在底部......

我想在 css 中的渐变上显示渐变

我想要一个有 30% 黑色和 70% 透明的渐变，它必须在我容器的渐变之上并且在我的 ul 之下 我想要这个黑色渐变覆盖我的动画渐变和我的 ul。所以，这个

固定边界半径[重复]

我正在设计图像滑块的样式，但在为其边框添加渐变后，border-radius 属性停止工作。我试过使用其他几个属性，但没有任何效果。什么……

使用 Python OpenCV 梯度检测深度图像的边缘

我有这张深度图（像素强度的差异非常明显）。 原始深度图像 我需要找到每个线程的边缘，如果可能的话，获取它在 im 中的坐标 (X, Y)...