iOS Safari:放置在类似颜色的背景上时CSS渐变太暗

问题描述

我有一个蓝框.我想在此蓝色框的底部放置一个渐变图层，该图层从透明渐变为蓝色，以便溢出的文本在底部逐渐渐变.

这是它的外观(在大多数浏览器中的外观):

这是iOS Safari上的外观:

我创建了一个小提琴来演示此问题: https://jsfiddle.net/cy89ocrs/11/

 背景图像:-webkit-gradient(linear，50％0％，50％100％，color-stop(0％，rgba(0，0，0，0))，color-stop(100％，#034b81))；背景图片:-moz-linear-gradient(rgba(0，0，0，0)，#034b81);背景图片:-webkit-linear-gradient(rgba(0，0，0，0)，#034b81);背景图片:linear-gradient(rgba(0，0，0，0)，#034b81); 

您可以看到，即使是相同颜色，在Safari中淡入的颜色也更暗.因此，当没有足够的文本时，推子仍然笨拙可见.有什么方法可以解决此问题，以便Safari像其他浏览器一样显示渐变?

解决方案

Safari浏览器正在正确呈现.

使用 linear-gradient 可以定义:

  linear-gradient([< angle>|到< side-or-corner>，]?<颜色停止>[，< color-stop>] +)\ ---------------------------------/\ ----------------------------/渐变线的定义色标列表其中< side-or-corner>= [左|右] ||[顶部|底部]和< color-stop>=<颜色>[< percentage>|< length>]? 

因此，您的渐变从不透明度为零的黑色( rgba(0,0,0,0))变为所需的颜色(#034b81 ).

请参阅: rgba(红色，绿色，蓝色，不透明)

这就是为什么您在Safari中看到黑线的原因.

要获得所需的外观，只需将rgba值更改为您的颜色值即可.因此您的代码应如下所示:

 背景图像:-webkit-gradient(linear，50％0％，50％100％，color-stop(0％，rgba(3，75，129，0))，color-stop(100％，#034b81))；背景图片:-moz-linear-gradient(rgba(3，75，129，0)，#034b81);背景图片:-webkit-linear-gradient(rgba(3，75，129，0)，#034b81);背景图像:线性渐变(rgba(3，75，129，0)，#034b81); 

演示

  div {职位:相对宽度:100％;高度:300像素；背景颜色:#034b81;白颜色;溢出:隐藏；}div:之后{内容: ' ';位置:绝对；左:0；底部:0;宽度:100％;高度:25像素；背景大小:100％；背景图像:-webkit-gradient(linear，50％0％，50％100％，color-stop(0％，rgba(3，75，129，0))，color-stop(100％，#034b81));背景图片:-moz-linear-gradient(rgba(3，75，129，0)，#034b81);背景图片:-webkit-linear-gradient(rgba(3，75，129，0)，#034b81);背景图像:线性渐变(rgba(3，75，129，0)，#034b81);}  

 ÷>sed ulculies eget quam坐在amet eleifend.Sed luctus risus justo，ut finibus metus commodo ut.Curabitur坐amet lobortis mi.Curabitur vel felis id anteAccumsan imperdiet.阿提那在ornare ligula.莫尔比菌发酵菌.Donec sodales molestie dioo sollicitudin bibendum.Morbi semper和其他人.Donec sed Lacus viverra，来自Accumsan Orci的马萨诸塞州.毛利人和调味品quam.Etiam Imperdiet tempor quam nonaliquam.Integer et pharetra metus et porttitor velit.turpis dui的毛里斯(Mauris).Etiam odio felis，placerat坐在amet massa等人，容易患上pre.Nulla iaculis elit id turpis dictum，id scelerisque est eleifend.Bibendum Nisl前Tincidunt的Quisque非Tristique ligula.Curabitur venenatis purus nec sem placerat，sed sollicitudin libero tincidunt.Etiam ac turpis mattis，lobortis quam quis，sagittis nisi.Vivamus eget nisl commodo，前庭augue varius，pretium augue.牛肝菌，天鹅绒尼科·科莫托(nec ultrices commodo)，利奥·恩尼姆·迪格尼西西姆(leo enim dignissim odio)和维塔利·阿里夸姆·尼库姆(vitae aliquam nibh ex nec elit).Duis egestas faucibus turpis，nec tristique nisl accumsan nec.菜豆，马齿v，sed nisl lacinia，前庭preiium mi.在tincidunt luctus dictum中.Praesent原始物质，研究质量.Cras rhoncus gravida dolor et rhoncus.Etiam et malesuada dolor.Sed in eros magna.Duis faucibus，ipsum eget uldiges dignissim，ipsum nunc consectetur nulla，在egestas nibh eros egetturpis.菜豆的前菜.Maecenas lectus mi，dictum varius lectus.Cras ac libero vehicula，interdum eros sagittis，tristiquetellus.毛里斯·廷奇顿·波特(Niuri)，新阿里夸姆·韦利特(Eestas)等.毛里斯nec gravida ipsum.Curabitur tempor velit nulla，坐在amet laoreet elit euismod ac上.Ut eros metus，consectetur amet purus eget，semper cursus nibh.在dolor nisl，vulputate ac augue等人，luctus faucibus mauris中.Donec eu ex ex.ec骨多齿虫.Donec nisl justo，pharetra eget quam id，commodo lobortis augue.Suspendisse坐着amettellus interdum，tempor dioo nec，iaculis sapien.Praesent maximus quis lacus调味品.Morbi convallis sem metus，vitae lacinia dui interdum sed.原语volutpat ex.Pellentesque居民morbi tristique senectus et netus et malesuada成名ac turpis egestas.Ut葡萄胎consectetur sem，在venerotis justo volutpat中.sed lobortis dui vitae quam facilisis，在grave mattis justo volutpat中.茜草素非nunc结果元素.Vestibulum vitae sodales nulla，一种ia虫.Nullam Tincidunt，dui sed elementum dapibus，mauris turpis aliquam odio，id laoreet nisl sapien一片星.悬浮能力.Sodales的整数viterra fermentum nulla.Proin viverra nulla eu felis tempus，维他命lacinia velit commodo.菜豆，原始结果，间质.Nunc在Tellus sed arcu egestas ullamcorper fringilla non purus中.Nunc efficitur元素智人，在mollis diam volutpat中在.悬吊性非葡萄糖血症.Nam rutrum est ligula，vel scelerisque felis volutpat id.Maecenas ornare molestie dui sed varius.强大的vulputate dui purus，sed venenatis purus pellentesque ac.Etiam Neque Arcu，Imperdiet sed enim in，Laoreet溃疡菜豆菱形菱形，累加维吾尔族eros feugiat id.Pellentesque居民morbi tristique senectus et netus et malesuada成名ac turpis egestas.毛里斯(Mauris eget)科莫多病.Donec特吕斯(Tonustellus)精英，不道德的发酵菌，Lobortis ac diam.Necta dictum eros在nemod tincidunt，在commodo torultrices.在蛛网状突起状叶状体病中.在亨德利特和埃拉特(Emert)Vestibulum ultricies egestas efficitur.Ut Finibus Dolor et Leo Lobortisegestas.Nulla aliquam quam ut metus molestie tincidunt.Aenean ac commodo毛里斯.