linear-gradients 相关问题

线性渐变是一种颜色区域,其从一种颜色平滑地变化到另一种颜色(或多于两种颜色)。

无法更改 Window Forms 应用程序上自定义渐变面板类的颜色属性

我有一个自定义渐变面板,是通过在我的表单应用程序下创建一个新类来创建的。一切都工作正常,直到渐变面板的颜色属性无法通过按钮更改......

回答 0 投票 0

使 CSS Shimmer Effect 工作在已加载的图像上

在 p 元素上使用时,我有以下微光效果效果很好,但它不适用于任何 div 或 img。那么,我应该进行哪些修改以确保微光效果发挥...

回答 1 投票 0

为什么 firefox 里的 `linear-gradient` 就像被切了一样?

为什么 firefox 中的渐变坏了?在 chrome 中它更平滑。

回答 0 投票 0

CSS中的线性渐变[重复]

我一直在学习 CSS,我正在尝试 线性渐变()。 当我使用“向右”时,这很好用。 背景图像:线性渐变(向右,#92EFFD,##4E65FF); 我的实际代码是...

回答 2 投票 0

我想知道为什么我在`article`中作为伪元素放置的`background-image:linear-gradient`的位置是这样的

背景图像:线性渐变 https://besthorrorscene.com/ << I was clone coding this site and the gradient underneath each was beautiful and I tried to copy it, but what I don't underst...

回答 0 投票 0

使用 clip-path 获取工具提示的圆形边框

有一个非常烦人的 CSS 挑战,我需要使工具提示具有线性渐变背景,并且周围有圆形边框。 这是我的解决方法,但只有顶部的两个角有一个圆形......

回答 0 投票 0

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

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

回答 1 投票 0

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

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

回答 0 投票 0

如何在 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;

回答 2 投票 0

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

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

回答 0 投票 0

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

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

回答 1 投票 0

如何在 <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> ...

回答 2 投票 0

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 )); 布...

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 0 投票 0

响应式棋盘图案背景

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

回答 3 投票 0

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

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

回答 4 投票 0

固定背景线性渐变

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

回答 0 投票 0

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

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

回答 0 投票 0

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

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

回答 2 投票 0

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.