CSS 渐变内部渐变

2024-01-12

是否可以使用渐变作为渐变内的颜色之一?

出于我的特定目的,我有一个从左到右的初始渐变:

linear-gradient(to right, red, darkgray);

但我希望深灰色部分实际上是从上到下的渐变:

linear-gradient(to bottom, darkgray, white);

我尝试了我期望工作的代码:

linear-gradient(to right, red, linear-gradient(to bottom, darkgray, white));

但这似乎不起作用,而且我还没有看到有人写过关于渐变中渐变的可能性。

编辑:这是不可能的[CSS渐变是图像,不能用作其他渐变中的颜色],但@hungerstar在下面有一个很好的解决方法:将具有透明度的渐变叠加在另一个渐变上。


渐变内部的渐变是不可能的。

话虽如此,看看这个。由于渐变是分层的,因此您必须使用以下命令为颜色设置一些透明度rgba()允许后面的渐变通过上面的渐变显示。

也许是这样的?

body {
  margin: 0;
  height: 100vh;
  background:
    linear-gradient( to right, rgba(255, 0, 0, 0.5), rgba( 169, 169, 169, 0.5 ) ),
    linear-gradient( to bottom, darkgray, white );
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 渐变内部渐变 的相关文章

  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • LESS CSS 语法对现代化很有用

    通常我使用现代化 http modernizr com 了解浏览器的功能 同时 我用LESS CSS http lesscss org 使我的CSS更具可读性和可维护性 使用 LESS 嵌套规则的常见样式如下所示 header color
  • CSS3变换:悬停时翻译,带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a
  • 闪亮的应用程序包:css 和所有 www/ 目录内容

    我正在尝试将 Shiny 应用程序转换为 R 包 但我在处理有关 www 目录以及 松散 文件的所有问题时遇到了问题 我闪亮的应用程序运行得很好 但是当我尝试 打包它 时 它不起作用 我闪亮的应用程序目录 my shiny app R ut
  • 在其他不可滚动的 div 上滚动时如何滚动可滚动的 div?

    我知道这个问题听起来很令人困惑 但这就是我想要做的 在下面的代码片段中 如果用户在绿色 div 上滚动 我希望黄色 div 相应地滚动 就像滚动黄色 div 一样 请注意 黄色 div 有overflow auto 但绿色的则不然 docu
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • 如何覆盖 bootstrap 表 td 样式?

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 如何从 pdf C# 中获取具有特定颜色的文本

    我必须将 pdf 文件中的数据放入特定的数据库结构中 这要求我能够从 pdf 文件中获取某些数据 由于 pdf 没有任何标签等 我想知道是否可以根据颜色获取文本 比如说我想要所有的红色文本 或者我想要文档中的所有斜体文本 这在 C 中可能吗
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案?

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只

随机推荐

  • const_cast 的行为

    我正在阅读有关 C 中的 const cast 运算符的内容 1 我无法理解的第一件奇怪的事情是 const cast 运算符语法 即 const cast 表达式 gt 我对这种语法的理解是 它有助于摆脱常量性expressionof t
  • 这个shell测试达到什么目的

    我有一个非常简单的问题 我无法回答 在 shell 中 这个命令会做什么 test d VIRTUAL ENV virtualenv VIRTUAL ENV 它似乎测试 virtualenv 目录是否存在 但我不明白 if 会如何处理该信息
  • 快速或简洁地确定基于行的数据集合中每列的最长字符串

    从我上次查询的结果 https stackoverflow com questions 2760168 can i set auto width on an open xml sdk generated spreadsheet withou
  • 为什么实现 IObjectSafety 没有带来什么改变?

    我们有一个 activex 对象 它实现了 IObjectSafety 以表明它对于脚本编写是安全的 它从受信任的站点安装 但我们仍然收到 IE 投诉 称该页面上的控件对于脚本编写不安全 运行我们的 activex 的站点管理员不愿意启用未
  • HQL 查询 id 对/元组

    我正在尝试使用 HQL 查询两个域之间新创建的关系 所以我想做类似的事情 select x id y id from Author as x join x books as y where x id y id not in 1 2 3 4
  • 通过连接查询大型数据集(15+ 百万行)

    我正在尝试连接两个表 products and products markets While products记录不足一百万条 product markets接近2000万条记录 数据已更改 因此架构创建表中可能存在一两个拼写错误 CREA
  • Javascript 日期时间字符串到 Date 对象

    我正在调试一个小型应用程序 其某些功能只能在 Chrome 中运行 问题在于日期选择器 您在其中选择日期和时间 然后日期选择器将其连接到日期时间字符串中 无论如何 字符串看起来像这样 2012 10 20 00 00 然而 现在使用它的 j
  • 为 property = "type.id" 选择什么 @JsonTypeInfo.ID 进行反序列化,JsonTypeInfo.Id.CUSTOM?

    所以我的 JSON 看起来像这样 ActivityDisplayModel name lunch with friends startTime 12 00 00 type id MEAL description Meal complete
  • 将标志传递给 Matlab 函数的最简洁方法是什么?

    我正在设计一个函数 它以一个结构和任意数量的标志作为参数 该函数将包含几个if检查是否设置了特定标志 实现这一目标的最巧妙方法是什么 我正在考虑将标志作为单独的字符串参数传递 有更简洁的解决方案吗 我会像使用那样做varargin and
  • Spring Batch ChunkRequest 抛出 stackOverflow

    我正在挣扎Spring Batch 远程分块使用较新版本的 Spring boot 首先 我尝试将 ChunkRequest 作为事件发送 这是不可能的 因为它没有公共默认构造函数 作为解决方案 我必须创建自定义序列化器和反序列化器 并在
  • Silverlight 4 中的 System.Data.DataTable?

    有谁知道如果系统 数据 数据表Silverlight 4 beta 现在支持吗 过去 我在 ASP NET 和 WinForm 项目中使用它进行数据绑定 其中 UI 和对象需要在运行时构建 如果没有 是否在路线图中 不 这不在 SL4 中
  • 在 React TypeScript 中推断 2 个 props 之间的泛型类型

    我相信这是可能的 但我不太擅长 TS 中的高级输入 还 所以 我想让 React 组件在一个 prop 中接受任何对象形状的数组 然后在不同的 事件函数 prop 中发出相同类型 interface Props data AnyGeneri
  • CGAffineTransform之后转换父/子UIView之间的坐标

    在我开始手工做所有事情之前 我想问一下框架是否可以提供一些帮助 我有一个 UIView 其中包含另一个带有地图的 UIView 父 UIView 包含地图的一些图例 最初我在地图视图中定义一些坐标 例如 100 40 并在父视图中放置一块图
  • Javascript-获取悬停元素的背景颜色

    我目前正在制作一个 google chrome 扩展 并使用此 javascript 动态更改悬停元素的背景颜色 var bindEvent function elem evt cb see if the addEventListener
  • 摄取附件需要更多权限

    我有一个应用程序 当我进行 apt 升级时 它使用elasticsearch Configuring Elasticsearch gt removing ingest attachment gt Downloading ingest att
  • Flutter:如何流式传输由不带 mp3 扩展名的 http url 提供的实时音频

    如何使用 flutter 流式传输由不带 mp3 扩展名的 http url 提供的实时音频 它不是远程文件 但是像网络广播这样的流媒体网址 您可以使用包https pub dev packages url audio stream htt
  • Wi-Fi Direct UWP 超时(HRESULT 异常:0x800705B4)

    我正在使用 UWP API 启动 Wi Fi Direct 接入点服务 开始正常 我在用着WiFiDirectConnectionListener使用以下命令监视连接到接入点的设备ConnectionRequested事件 var conn
  • 如何为 aws gateway API 创建预签名 URL

    我已经看到 S3 对象的预签名 URL 是否可以为 API 网关创建预签名 URL 我已经经历过文档 https docs aws amazon com general latest gr signing aws api requests
  • 类和结构的使用[重复]

    这个问题在这里已经有答案了 可能的重复 在 C 中什么时候应该使用类还是结构 https stackoverflow com questions 54585 when should you use a class vs a struct i
  • CSS 渐变内部渐变

    是否可以使用渐变作为渐变内的颜色之一 出于我的特定目的 我有一个从左到右的初始渐变 linear gradient to right red darkgray 但我希望深灰色部分实际上是从上到下的渐变 linear gradient to