如何组合两个css3渐变?

2024-04-22

我有两个用于 HTML BODY 背景的 CSS 我使用这个 css 作为我页面的背景;我想将这两个重叠并获得组合效果?

    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

第二个是

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

我怎样才能将这两者合而为一?


您的代码的两个问题

First,这两个图像必须在一个图像中调用background-image调用,否则 CSS 的“级联”部分的工作方式第二个将覆盖第一个。因此,需要更改的第一件事是将所有调用按如下方式分组(每个连续调用用逗号分隔):

background-image: 
  linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%), 
  linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

这就是可能重复的问题注意到要做 https://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css,这是正确的,但它可能对你不起作用,因为......

Second,您定义的每个渐变图像都是不透明的,因此其中一个将“覆盖”在另一个之上,并且有效地只给你一张图像 http://jsfiddle.net/dGf5x/13/。我认为你真正想要的是淡入淡出效果,这需要你使用 alpha 不透明度来实现。所以每个实例#FFFFFF需要更改为rgba(255, 255, 255, 0), 然后你就会得到我相信你所寻求的混合 http://jsfiddle.net/dGf5x/14/:

background-image: 
  linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0) 75%, #A3EF69 100%), 
  linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, 
    rgba(255, 255, 255, 0) 75%, #A3EF69 100%);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何组合两个css3渐变? 的相关文章

  • 整理 CSS 的最佳方法是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在整理一个以前由不同的人修改过的网站 这是我拥有的页面的骨架 测试 html http pastry se 94064 nav css ht
  • 如何在鼠标悬停时覆盖 div / box?

    我有一个链接 当用户将鼠标悬停在其上时 它应该在链接下显示一个框 div 盒子应该覆盖其下方的所有内容 我如何使用 css 或 javascript 来做到这一点 您有一个隐藏的绝对定位的 div 和链接的子级 然后 当您将鼠标悬停在链接上
  • Safari 10.0.1 未从 srcset 选择正确的图像

    Safari 无法正确处理我网站上某些图像的 srcset 并且完全忽略我在尺寸属性中设置的规则 如果您单击下面的链接并在 Safari 中查看它 您将看到顶部的图像以其原始尺寸显示 而不是我生成的尺寸 但是 在页面底部它有效吗 并已下载为
  • HTML - 使用 JS 根据值更改文本颜色

    我正在使用 Django 创建一个以 HTML 形式显示的表格 我想当数字为负数时将数字的颜色更改为红色 当数字为正数时将数字的颜色更改为绿色 我知道我需要使用 JS 来实现这一点 但我无法让它工作 任何帮助将不胜感激 这是我的 Djang
  • 需要为每个图例文本高图应用背景颜色

    正如我在问题中所说 我希望改变我的传奇 例如 FROM TO 我已经尝试过这个背景颜色 legend backgroundColor CCC layout horizontal floating true align left vertic
  • 缩放网页内容上的特定元素(HTML、CSS、JavaScript)

    如果用户在移动设备上缩放网站 我只想缩放网站的特定元素 某个 div 下图展示了我的想法 如您所见 测试已缩放 但顶部 div 保持相同大小 仅包含 test 的 div 被缩放 缩放 有人可以给我一些关于如何实现这一目标的提示吗 我真的不
  • 使用多个相互矛盾的 css 文件时的优先顺序

    当在同一页面上使用多个 css 文件并且它们发生冲突时 我如何知道将使用哪一个 例如 如果一个说蓝色主体背景 另一个说红色 快速回答 如果两段 CSS 具有相同的特异性 http web archive org web 2016021005
  • 使用尾随与号 (&) 作为类组合选择器,而不是后代选择器

    我想申请一个班级 highlight到一堆不同的元素并根据元素类型设置它们的样式 我可以这样做 input type text highlight select highlight someOtherSelector hightlight
  • 如何修改primeng p日历样式?

    我正在尝试修改 primeng p calendar 但它无法正常工作 例如 我希望它是这样的 需要的改变 https i stack imgur com QBXoh png 但原来它看起来像这样 原始图像 https i stack im
  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • 将自定义字体与 wkhtmltopdf 一起使用

    我正在尝试在使用 wkhtmltopdf 生成的 PDF 中使用自定义字体 我读到您不能使用 google webfonts 并且 wkhtmltopdf 使用 truetype ttf 文件 谁能证实这一点吗 所以我从 google we
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式

随机推荐

  • 缩减规模时 EC2 Spot 实例终止通知

    每次安排终止我的现货实例时 我都需要运行清理脚本 我有两个终止的理由 现货实例的价格超出了我的出价 由于自动伸缩组的伸缩策略导致的缩容 基于5分钟集群平均CPU使用率 随机实例终止 我确实喜欢下面的简单脚本this http blog fu
  • 如何停止在从 Google 云端硬盘下载时记住和应用文件扩展名

    我上传了混合负载的文件 图像 文档 pdf 所有文件扩展名为 dc 文件是否根据基础类型进行转换 作为迁移过程的一部分 我使用 Google Apps 脚本重命名这些文件并应用适当的文件扩展名 例如 pdf 选择其中任何文件并将结果下载到扩
  • 遍历数组并以项目符号显示

    我想遍历这个数组并显示 评论 作为要点 Array 1 gt Array id gt 1 comment gt a parent id gt 0 children gt Array 3 gt Array id gt 3 comment gt
  • 在尝试删除文件之前检查文件是否已打开[重复]

    这个问题在这里已经有答案了 在尝试删除文件之前如何检查文件是否已打开 以编程方式 像这样的东西 if file is open close it first delete file 由于某些原因 我认为这不会起作用 没有标准的 Java 机
  • 如何在c#中访问面板中的控件

    我在 c winforms 中使用面板 并使用循环用图片框的编号填充面板 例如面板名称为panal foreach string s in fileNames PictureBox pbox new new PictureBox pBox
  • boto3 copy 与 copy_object 有关 s3 中文件权限 ACL 的比较

    当我使用不同的键和前缀将对象复制到同一存储桶后 我相信这类似于重命名 其公共读取权限被删除 import boto3 s3 boto3 resource s3 copy source Bucket mybucket Key mykey s3
  • 如何使 volatile count++ 操作成为线程安全的

    我一直在经历 JCIP 作者说 线程限制的一个特殊情况适用于易失性变量 只要确保 volatable 变量仅从单个线程写入 对共享 volatile 变量执行读取 修改 写入操作是安全的 例如 count 被认为是一个复合操作 读取值 加一
  • 将 certifi 模块与 urllib2 一起使用?

    我有使用 urllib2 模块下载 https 页面时遇到问题 https stackoverflow com questions 33264502 windowserror error 5 access is denied using u
  • Laravel 外键下拉列表

    我有 2 张桌子 客户 id 全名 公司 ID 公司 id 公司名称 我已经创建了两个表之间的关系 并且工作正常 因为我可以在客户视图中显示公司名称 如下所示 customer gt company gt company name 我现在与
  • 无法在 IntelliJ IDEA 中打开调试器端口

    我有一个问题 无法使用 IntelliJ IDE 在调试模式下设置应用程序 但运行模式可以 我的操作系统是Windows 7 IDE是IntelliJ IDEA Web容器是Tomcat 6 我尝试了很长时间 更改了HTTP端口和JMX端口
  • 如何将数据库备份到 .bak 文件?

    我有一个在 Visual Studio 2008 中创建的网站 我需要将其上线 如何将数据库文件备份到 bak 以便将其交给托管公司放置在服务器上 从 SQL 提示符处 BACKUP DATABASE MyDatabase TO DISK
  • SSRS 2008 R2 到 SSRS 2016 迁移

    我必须将 770 个 SSRS 报告 包括本机模式和 Sharepoint 模式报告 从 2008 R2 版本迁移到 SSRS 2016 版本 哪个是 SSRS 迁移的最佳工具 我见过很少的工具 如 Microsoft Reporting
  • 如何将日期列表转换为字符串列表

    我正在尝试在谷歌电子表格中打印出日期列表 到目前为止我有以下脚本 它可以很好地获取日期列表 但我需要知道如何将此日期列表转换为日期列表字符串 def daterange startdate enddate r enddate datetim
  • 在 Spark 执行器节点上安装 Python 依赖项的最简单方法?

    据我所知 您可以将单个文件作为 Python Spark 程序的依赖项发送 但是成熟的库 例如 numpy 呢 Spark 是否有办法使用提供的包管理器 例如 pip 来安装库依赖项 或者这必须在 Spark 程序执行之前手动完成 如果答案
  • 无法解析包含单引号的json数据

    Problem 我的一些 json 数据出现解析错误 因为它包含单引号 例如 我的一些数据可能如下所示 拉里的数据 我读过以下文章 JSON 响应中的 jQuery 单引号 https stackoverflow com questions
  • 由于“erf”函数使用率较高而导致性能瓶颈

    我使用大型矩阵 100x100 到 3000x3000 进行一些计算 大量求和和矩阵向量乘法 我使用 Eigen 库来处理向量和矩阵 我的代码是简单的类似 C 的代码 只有函数 没有类 并将被编译为 DLL 以在 Excel 上使用 我发现
  • 无法安装 kubernetes helm Chart 错误:无法重复使用仍在使用的名称

    无法安装 helm 图表 但当我使用 helm 生成的原始文件时 我可以通过 kubectl apply 安装 当我使用时显示以下错误helm install myChart debug Error cannot re use a name
  • 如何在运行时设置系统属性 Spring 3 MVC

    目前我们有下面的 bean 定义来设置 javax net ssl trustStore
  • Angular JS UI-网格删除行

    我是新来的ui grid我正在尝试在 AngularJS 中实现一个表格 如下图所示 我正在尝试选择一行并使用该特定行上的删除按钮将其删除 这ui grid文档要求我们使用gridApi但我找不到足够的文档 请在此处查看如何删除行的工作示例
  • 如何组合两个css3渐变?

    我有两个用于 HTML BODY 背景的 CSS 我使用这个 css 作为我页面的背景 我想将这两个重叠并获得组合效果 IE10 Consumer Preview background image ms linear gradient to