如何组合两个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渐变? 的相关文章

  • 从 Angular 4 中的 html 中删除主机组件标签

    我有一个表 我想在其中显示一个表行 它是一个组件 我还想将数据传递给该组件 table th td col 1 td td col 2 td td col 3 td th tr tr table
  • 如何在鼠标悬停时覆盖 div / box?

    我有一个链接 当用户将鼠标悬停在其上时 它应该在链接下显示一个框 div 盒子应该覆盖其下方的所有内容 我如何使用 css 或 javascript 来做到这一点 您有一个隐藏的绝对定位的 div 和链接的子级 然后 当您将鼠标悬停在链接上
  • 使用 Bootstrap 3 具有固定高度、标题和列宽度的表格

    我想要一张具有以下功能的表 固定标题 固定高度 带有可见的滚动条 3个固定宽度的列 一个大列和两个窄列 我开始使用 tbody display block overflow auto height 100px 为了至少获得固定高度 但此规则
  • jQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见

    我正在寻找一种方法来确定使用 JavaScript jQuery 是否显示 WooCommerce 商店通知 商店通知的 HTML 看起来像这样 p class woocommerce store notice demo store sty
  • 如何在 HTML 元素中使用 CSS 设置特定单词的样式?

    如何设置其中特定单词的样式 p 标签 前任 STUDIO X是有史以来最好的工作室 如何使用 css 将 STUDIO X 设为与 is the best studio ever 不同的字体 你应该做这个 p font size 12px
  • 如何避免 Angular 材料中出现额外的 mat-form-field-underline

    我在查找为什么在使用组件时会出现额外的 mat form field underline 时遇到问题 我的页面使用此标记
  • 在 css / html 中创建六边形

    我试图在 css html 中制作几个六边形 类似于这样 http www asta uk com sites all themes asta logo png http www asta uk com sites all themes a
  • Internet Explorer 9 中图像地图周围的蓝色边框

    我遇到了以下问题 我在网站上使用图像地图 在 Internet Explorer 9 IE8 很好 中 当我单击链接 区域标签 时 它周围会出现蓝色边框 如何摆脱它 我试过了 map map area border none importa
  • 使用 javascript 设置最大高度

    我有一个 div 这个 div 的最大宽度是用户定义的 我知道我可以使用 element style height 完成它 但这在 IE 中不起作用 关于如何使用 javascript 实现 Firefox 的最大高度等效项有什么想法吗 通
  • 背景 CSS 图像仅在 IE7 中不显示

    html 是 div class choose os p a href someLink class windows Microsoft Windows a a href someOtherLink class macos Apple Ma
  • Chrome DevTools:计算样式与 css 规则不同?

    当我在 CSS 文件中定义 4px 时 我的 DOM 元素的 border top width 怎么可能是 0px 当我使用 Chrome DevTools 检查元素时 我发现计算的样式告诉 0px 而最上面的 css 规则是 4px 而且
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间

随机推荐

  • 缩减规模时 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