- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我有一个蓝色的盒子。我想在这个蓝色框的底部放置一个从透明渐变到蓝色的渐变叠加层,以便溢出的文本在底部逐渐淡出。
它应该是这样的(在大多数浏览器上确实是这样):
这是它在 iOS Safari 上的样子:
我创建了一个 fiddle 来演示这个问题:https://jsfiddle.net/cy89ocrs/11/
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, #034b81));
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), #034b81);
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), #034b81);
background-image: linear-gradient(rgba(0, 0, 0, 0), #034b81);
如您所见,在 Safari 中淡出的颜色更深,即使它是相同的颜色。因此,当没有足够的文本时,推子仍然很难看得见。有没有办法解决这个问题,让 Safari 像其他浏览器一样显示渐变?
最佳答案
Safari 渲染正确。
与 linear-gradient你可以定义:
linear-gradient(
[ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
所以你的渐变从不透明度为零的黑色 (rgba(0,0,0,0)
) 到你想要的颜色 (#034b81
).
参见:rgba(red,green,blue,opacity)
这就是您在 Safari 中看到那条黑线的原因。
要获得您想要的外观,只需将 rgba 值更改为您的颜色值。所以你的代码应该是这样的:
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(3, 75, 129, 0)), color-stop(100%, #034b81));
background-image: -moz-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: -webkit-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: linear-gradient(rgba(3, 75, 129, 0), #034b81);
div {
position: relative;
width: 100%;
height: 300px;
background-color: #034b81;
color: white;
overflow: hidden;
}
div:after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 25px;
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(3, 75, 129, 0)), color-stop(100%, #034b81));
background-image: -moz-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: -webkit-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: linear-gradient(rgba(3, 75, 129, 0), #034b81);
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies eget quam sit amet eleifend. Sed luctus risus justo, ut finibus metus commodo ut. Curabitur sit amet lobortis mi. Curabitur vel felis id ante accumsan imperdiet. Etiam at ornare ligula.
Morbi consequat fermentum eros nec fermentum. Donec sodales molestie odio sollicitudin bibendum. Morbi semper ac nisl mattis semper. Donec sed lacus viverra, congue massa at, accumsan orci. Mauris et condimentum quam. Etiam imperdiet tempor quam non
aliquam. Integer et pharetra metus, et porttitor velit. Mauris at turpis dui. Etiam odio felis, placerat sit amet massa et, suscipit pretium eros. Nulla iaculis elit id turpis dictum, id scelerisque est eleifend. Quisque in ex tincidunt, bibendum nisl
non, 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, vestibulum augue varius, pretium augue. Cras ultricies, velit
nec ultrices commodo, leo enim dignissim odio, vitae aliquam nibh ex nec elit. Duis egestas faucibus turpis, nec tristique nisl accumsan nec. Phasellus lacus massa, vulputate sed nisl lacinia, pretium vestibulum mi. In tincidunt luctus dictum. Praesent
elementum lorem eu erat mattis, quis convallis massa tristique. Cras rhoncus gravida dolor et rhoncus. Etiam et malesuada dolor. Sed in eros magna. Duis faucibus, ipsum eget ultrices dignissim, ipsum nunc consectetur nulla, in egestas nibh eros eget
turpis. Phasellus vestibulum mollis ullamcorper. Maecenas lectus mi, hendrerit vel justo at, dictum varius lectus. Cras ac libero vehicula, interdum eros sagittis, tristique tellus. Mauris tincidunt porttitor nisl, nec aliquam velit egestas nec. Mauris
nec gravida ipsum. Curabitur tempor velit nulla, sit amet laoreet elit euismod ac. Ut eros metus, consectetur sit amet purus eget, semper cursus nibh. In dolor nisl, vulputate ac augue et, luctus faucibus mauris. Donec eu ex ex. Donec ut elementum ligula.
Donec nisl justo, pharetra eget quam id, commodo lobortis augue. Suspendisse sit amet tellus interdum, tempor odio nec, iaculis sapien. Praesent maximus quis lacus a condimentum. Morbi convallis sem metus, vitae lacinia dui interdum sed. Proin eget
volutpat ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut molestie consectetur sem, at venenatis justo volutpat in. Sed lobortis dui vitae quam facilisis, gravida mattis justo volutpat. Aliquam elementum
non nunc consequat elementum. Vestibulum vitae sodales nulla, a iaculis tellus. Nullam tincidunt, dui sed elementum dapibus, mauris turpis aliquam odio, id laoreet nisl sapien a metus. Suspendisse potenti. Integer viverra fermentum nulla at sodales.
Proin viverra nulla eu felis tempus, vitae lacinia velit commodo. Phasellus eu nulla elementum, consequat orci eu, interdum metus. Nunc in tellus sed arcu egestas ullamcorper fringilla non purus. Nunc efficitur elementum sapien, in mollis diam volutpat
at. Suspendisse non luctus risus. Nam rutrum est ligula, vel scelerisque felis volutpat id. Maecenas ornare molestie dui sed varius. Praesent vulputate dui purus, sed venenatis purus pellentesque ac. Etiam neque arcu, imperdiet sed enim in, laoreet
ultrices nisl. Phasellus rhoncus lobortis ipsum, viverra accumsan eros feugiat id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget commodo risus. Donec tellus elit, imperdiet a fermentum eget,
lobortis ac diam. Nulla dictum eros at neque tincidunt, at commodo tortor ultrices. In dapibus risus at tellus lobortis condimentum. In hendrerit et erat sit amet scelerisque. Vestibulum ultricies egestas efficitur. Ut finibus dolor et leo lobortis
egestas. Nulla aliquam quam ut metus molestie tincidunt. Aenean ac commodo mauris. Nullam ultrices urna nisi, vitae commodo quam viverra pulvinar.</div>
关于iOS 浏览器 : CSS gradient too dark when placed over similarly colored background,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29305348/
我正在将现有应用调整为深色模式。 某个 View 使用图像来表示特征的状态。我选择了 Assets 目录中的图像并将其 Appearances 字段从无修改为 Any, Dark。然后我为 Dark
所以我有一个应用程序是 Holo Light with Dark Actionbar,每当我在 EditText 中复制和粘贴某些内容时,图标都是白色的,因此您看不到它们。屏幕截图位于下方。有什么办法
我有 Firefox 69, 激活暗模式时,newtab 页面保持亮起。 我通过 about:config?filter=browser.in-content.dark-mode 激活了暗模式(改为
我正在使用 Ubuntu 并尝试通过使用 matchMedia 获得用户的首选主题但它总是返回 false对于这个查询。 window.matchMedia('(prefers-color-schem
我正在使用从 SVG 文件导入为矢量绘图的用户个人资料头像。我还将我的主题扩展到 Material 主题 Theme.MaterialComponents.DayNight.NoActionBar。但
我一直在查看 Dark Reader 扩展的源代码。 https://github.com/darkreader/darkreader我找不到负责在网页右侧生成黑色滚动条的代码或函数。它位于哪个文件中
在vim中,我可以运行set bg=dark,然后vim将调整所有语法突出显示以在具有深色背景的终端上工作(无论背景是否实际上是深色的,vim都将其假定为深色)。 我如何告诉emacs假定背景是黑暗还
我今天升级了 Pycharm2016.1,并希望将主题更改为 Solarized Dark,但我看不到更改/添加的选项。有人尝试用 Pycharm2016.1 做同样的事情吗? 最佳答案 this G
我目前正在使用带深色操作栏的 Holo 灯,我想更改我的应用以完全使用 Holo。我从 更改了 styles.xml ""到 "" 我在 values-14 内更改了 styles.xml ""到 "
目标: 将主题更改为“UI darkness” 问题: 根据下面的代码,我不知道该怎么做。 $(function() { $( "#from").datepicker({ show
我最近想让我的状态栏颜色渐变。我知道 WindowManager 方式是如何工作的。但我决定另辟蹊径,用渐变色为状态栏上色。 所以我这样做了, #3F51B5 @drawable/
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
我使用的是TailWind 3.3.2和Next.js 13.4.4。在我的网站上。我没有实现黑暗模式,一切对我来说都运行得很好。我在笔记本电脑和移动设备上使用不同的浏览器(Chrome、Firefo
好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的 终于, 随着iphone11等新手机的发售, ios 13系统也正式发布了, 伴随着手机版的深色
我正在使用 following css使用 @media(prefers-color-scheme: dark) 以便向在操作系统级别选择暗模式的用户显示暗站点版本。当我通过 Windows 切换深色
我可以得到UI_MODE_NIGHT_MASK调用 resources.configuration.uiMode和 Configuration.UI_MODE_NIGHT_MASK . 我需要听这个变
在使用冰柱很长时间后,我正在尝试使用 Helm 。 大多数时候我默认使用流行的日光深色配色方案,而 helm 似乎选择了特别难以理解的颜色: ...我如何建议 helm 选择更有用的颜色?希望当我切换
在开发菜单栏应用程序时,我很难找到使该应用程序看起来更好的首选方法。我本来以为Apple控件基本上可以解决此问题,但事实并非如此。 确保菜单栏应用在亮模式和暗模式下都看起来不错的首选方法是什么?我是否
经过研究,我发现Qt 5现在提供了一个所谓的Fusion主题,该主题被描述在他们的blog posts中。我非常喜欢您可以在上一张图片中看到的带有黑色配置的主题,并且我想在我的应用程序中使用它,但是似
我在 Mac 上启用了暗模式,但在带有 ckeditor 的 django 管理面板中看起来很尴尬。是否可以在 Chrome 或 Django 管理员中禁用它?我已经尝试过主题和浏览器扩展,但没有成功
我是一名优秀的程序员,十分优秀!