Safari中CSS的linear-gradient从透明渐变发灰问题

Safari渐变显示问题
最新推荐文章于 2025-10-11 19:07:28 发布
原创 最新推荐文章于 2025-10-11 19:07:28 发布 · 5.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在使用Safari浏览器查看MDN中的线性渐变示例时，发现渐变效果出现灰色，未达到预期。原因是Safari对rgba参数同时进行渐变，解决方法是将rgba前三个参数设置为背景色值。
部署运行你感兴趣的模型镜像

问题描述

可以用Chrome和Safari分别打开MDN中的例子
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient#Result_3

发现，Chrome中的渐变可以正常显示，但Safari中的渐变会出现灰色，没有达到预期的效果。

问题原因

Safari在渐变中对颜色的处理是同时渐变rgba()中的每一个参数，因此该例子中实际上是在渐变从黑色到颜色，从全透明到不透明。因此，中间出现了灰色。

解决方法

将rgba()中的前三个参数，设置成背景色的颜色值即可。

您可能感兴趣的与本文相关的镜像

PyTorch 2.6

PyTorch 2.6

PyTorch
Cuda

PyTorch 是一个开源的 Python 机器学习库，基于 Torch 库，底层由 C++ 实现，应用于人工智能领域，如计算机视觉和自然语言处理

SimGenius
关注
iOS开发之颜色渐变
YouAreUmbrella的博客
09-14 3265
iOS开发之颜色渐变
CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
热门推荐
勤学daydayup的博客
07-18 2万+
本文主要介绍linear-gradient一些不太一样的玩法 普通渐变 -最常见的用法是从字面意思理解，实现一个渐变背景，如下图效果 background: linear-gradient(to right, #30e8bf, #ff8235); 无渐变，突变效果 调整色标位置，实现两个非渐变效果 background: linear-gradient(to right, #30e8bf 50%, #ff8235 50%); 参数解释，颜色后面跟一个百分比，表示当前颜色的过渡位置，如果前后两个颜色的过.
html 图片 透明颜色,CSS实现图片变灰色及透明度
weixin_35809056的博客
06-04 2251
【图片变灰】每当遇到哀悼日，很多网站快速变灰色，来看看实现方式吧：方式一，仅支持ie)html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}方式二，适合小页面，仅支持ie)body {filter:gray}方式三，仅支持ie与chrome)html {overflow-y:scroll;filter:prog...
【CSS 深度解析】`linear-gradient()` 函数：无需图片，轻松打造平滑色彩过渡，提升网页视觉表现力与性能的关键技术
最新发布
2501_93104808的博客
10-11 297
CSS linear-gradient() 函数用于创建沿直线平滑过渡的颜色渐变效果，作为background-image的值。它可实现无缝色彩过渡、减轻服务器负载并适配响应式设计。语法包含方向（角度或关键词）和颜色停止点列表，支持多色渐变和硬边缘效果。相关函数repeating-linear-gradient()可生成重复渐变图案。该特性在现代浏览器中广泛支持，建议为旧浏览器提供纯色降级方案，并注意文本可读性。此外，可通过rgba()实现透明渐变，或叠加多层渐变创造复杂效果。
webkit内核（chrome、safari） 、FF、IE 、opera 下的linear-gradient 写法
Vin1992的博客
01-18 2948
1.webkit内核 下     基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );     注释： -webkit-gradient是background的一个属性值；webkit内核的Linear Grad
html渐变透明度,CSS3 线性渐变（linear-gradient），半透明+渐变
weixin_39636057的博客
06-17 1784
不兼容IE浏览器，所以IE中要添加默认的background或background-color1、开始于center(水平方向)和top(垂直方向)也就是Top → Bottom：/* Firefox 3.6+ */background-image:-moz-linear-gradient(top, #ace, #f96);/* Safari 5.1+, Chrome 10+ */backgrou...
IOS背景半透明渐变问题
qq_41913971的博客
04-27 1183
IOS背景半透明渐变问题 问题描述 给一个层设置半透明的背景 background:linear-gradient(to bottom, transparent, #ffffff) 在安卓上显示正常（白色半透明，但ios上显示透明渐变会出现灰色，所以不能直接写成transparent。 正确写法： background: linear-gradient(to bottom, rgba(255,...
深入剖析CSS中的线性渐变linear-gradient
09-24
在CSS中，线性渐变可以通过`linear-gradient`函数来创建。 **语法** ```css linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) ``` 其中，`<angle>`用于指定渐变线的角度，...
CSS3,线性渐变（linear-gradient）的使用总结
09-24
在CSS3中，渐变分为线性渐变（linear-gradient）和径向渐变（radial-gradient）。本文将重点探讨线性渐变的使用方法。 一、线性渐变的基本语法 线性渐变的基本语法可以表示为： ```css background: linear-gradient...
CSS 实现渐变效果小结( linear-gradient线性渐变 和 radial-gradient径向渐变)
01-21
线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...
CSS3 linear-gradient线性渐变生成加号和减号的方法
12-13
传统的实现方式是通过图片来实现+-按钮，而本文却将使用CSS3的linear-gradient线性渐变来实现购物车的加减操作。 要实现一个减号效果非常简单，例如要实现一个10px*2px的减号图形，则CSS： .minus { background-...
css tr 渐变,【CSS】Safari浏览器中的渐变问题（给tr添加的渐变效果作用在了td上）...
weixin_29195137的博客
08-03 845
我想给表格的每一行(tr)增加一个从左到右背景色的渐变,在谷歌浏览器中显示的是正常的,如下图但是在Safari浏览器中，却是每个单元格(td)都显示了渐变的背景色,如下图代码：tr{background-color: #1FA9F4; /* Old browsers */background-image: -moz-linear-gradient(right, red 0%, green 100%...
css设置渐变色
Bright
11-12 1568
background: -webkit-linear-gradient(to right,#29644F, #5FEFBE); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(to right,#29644F, #5FEFBE); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradie...
css 渐变背景设置及修改透明度方法
weixin_42017221的博客
02-12 2072
background: linear-gradient(to right，颜色1, 颜色2);- - - 这种是从左到右，有颜色1过渡为颜色2；background: linear-gradient(颜色1, 颜色2);- - - 这种是从上到下，有颜色1过渡为颜色2；background: linear-gradient(角度, 颜色1, 颜色2, 颜色3);透明度值 0~1 之间，0指完全透明，1指完全不透明，90deg - - - 从左到右，0deg - - - 从上到下，根据具体需求设置渐变方向。
ios 渐变透明背景_CSS 之背景用法
weixin_39648297的博客
11-20 357
阅读本文约需要6分钟大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了JS 之Canvas实现图像灰度化的知识，今天跟大家分享下CSS 之背景用法的知识。1CSS 之背景用法background 属性是CSS中用于设置元素背景的属性，最简单的background属 性名，是针对背景若干设定的合并简写，最早的CSS只...
苹果手机浏览器字体渐变色无效？
学习从今天开始
06-23 1005
css兼容问题
css渐变参数说明(webkit内核的safari、 Chrome, FF等)
软件哲学
06-03 1591
webkit内核的safari、 Chrome webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );-webkit-grad
css在ios和安卓上的兼容问题（持续更新）
qq_44318215的博客
10-27 4315
1、linear-gradient渐变在ios上会出现灰底 原因：ios不支持transparent表示透明，改用rgba(255, 255, 255, 0) 2、滚动条在安卓机上不显示 // 手动写scrollbar代码 &::-webkit-scrollbar { background-color: #fff; } &::-webkit-scrollbar-thumb { width: 8px; background: #E9E9E9; border-radius: 5
关于CSS3背景渐变色无效问题
q475254344的博客
09-06 1万+
在写CSS过程中遇到了如下问题 .loginbox{     background-color: linear-gradient(#D0D0D0, #E0E0E0, white);     width: 300px;     ........； } 此CSS样式无法改变元素的背景色，是因为渐变色在CSS中被定义成了类型，所以渐变色只可以用在需要图形数据的地方。因此linear-gr
css linear-gradient 透明
02-19
### 如何在 CSS 中使用 `linear-gradient` 创建透明渐变效果 为了创建带有透明度的线性渐变，在定义颜色时可以采用RGBA色彩模式，其中A代表Alpha通道，用于控制不透明度。当设置的颜色值为`transparent`或是调整了...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值