rgba 不适用于 CSS 中的填充属性

关键词：

【中文标题】rgba 不适用于 CSS 中的填充属性【英文标题】：rgba doesn't work for fill property in CSS 【发布时间】：2021-06-15 13:41:57 【问题描述】：

circle 
    fill: rgba(248, 248, 248, 0.5);

<svg width='400' height='400'>
    <circle r='100' cx='200' cy='200'></circle>
</svg>

rgb 代码适用于此，但我发现 rgba 不起作用。形状变得不可见。 我在 Chrome 和 Firefox 上对此进行了测试。

我在这里错过了什么吗？

【问题讨论】：

它对我有用，但你的圆圈在白色背景下是如此苍白，基本上是不可见的。 在您的情况下，颜色是非常浅的灰色 - 几乎是白色。这就是它 seam 不起作用的原因。如果您将颜色更改为 fill: rgba(248, 0, 0, 0.5); 之类的其他颜色，您会看到它有效 【参考方案1】：

这个圆圈几乎是白色的，也是部分透明的，你只是在白色背景下看不到它。

在黑色背景上，您可以看到它在 Firefox 和 Chrome 上都可以完美呈现...

svg 
    background-color: black;


circle 
    fill: rgba(248, 248, 248, 0.5);

<svg width='400' height='400'>
    <circle r='100' cx='200' cy='200'></circle>
</svg>

【讨论】：

非常感谢！该死！我太傻了！大声笑谢谢！

CSS 过渡不适用于 FF 中的 top 属性

】CSS过渡不适用于FF中的top属性【英文标题】：CSStransitiondoesnotworkontoppropertyinFF【发布时间】：2013-08-2817:20:12【问题描述】：我有以下HTML：<ul><li><ahref="#"><h2>title</h2></a></li><li><ahref="#">& 查看详情

CSS属性不适用于jQuery无限滚动中的附加项目

】CSS属性不适用于jQuery无限滚动中的附加项目【英文标题】：CSSpropertiesnotappliedtoappendeditemsinjQueryinfinitescroll【发布时间】：2014-10-0606:14:12【问题描述】：我正在使用DrupalViews将带有this无限滚动脚本的内容加载到砖石风格的项目网... 查看详情

EditText 填充属性不适用于 API 21 和 22

】EditText填充属性不适用于API21和22【英文标题】：EditTextpaddingattributedoesnotworkforAPI21and22【发布时间】：2017-10-2118:42:42【问题描述】：为我的EditTexts设置填充值。但是它不适用于21和22api版本。但是，它非常适用于19、23、24。这是... 查看详情

带有变换的css关键帧动画不适用于SVG

】带有变换的css关键帧动画不适用于SVG【英文标题】：csskeyframesanimationwithtransformnotworkingonSVG【发布时间】：2016-02-0709:51:36【问题描述】：当我尝试使用CSS关键帧动画为SVG文本设置动画时，它不会为变换属性设置动画。动画填充... 查看详情

为啥百分比填充/边距不适用于 Firefox 和 Edge 中的弹性项目？

】为啥百分比填充/边距不适用于Firefox和Edge中的弹性项目？【英文标题】：Whydoesn\'tpercentagepadding/marginworkonflexitemsinFirefoxandEdge?为什么百分比填充/边距不适用于Firefox和Edge中的弹性项目？【发布时间】：2016-08-1510:57:57【问题描述... 查看详情

CSS 过渡不适用于 height 属性

】CSS过渡不适用于height属性【英文标题】：CSSTransitiondoesn\'tworkonheightproperty【发布时间】：2021-10-2303:11:16【问题描述】：所以我在点击时进行菜单交互，如果你想看一下，这是我的代码sn-p。letbtn=document.querySelector(\'.trigger\');leticon... 查看详情

CSS过渡不适用于height属性[重复]

】CSS过渡不适用于height属性[重复]【英文标题】：CSStransitionsdoesn\'tworkwithheightproperty[duplicate]【发布时间】：2014-09-1413:37:18【问题描述】：我正在尝试创建一个带有过渡的简单菜单。当您单击菜单项时，它应该以CSS过渡打开，但我... 查看详情

cursor:pointer 属性不适用于 Webkit 浏览器中的文件上传按钮

】cursor:pointer属性不适用于Webkit浏览器中的文件上传按钮【英文标题】：Thecursor:pointerpropertydoesn\'tapplytofileuploadbuttonsinWebkitbrowsers【发布时间】：2011-11-2504:08:37【问题描述】：我的CSS代码在safari和chrome等webkit浏览器上无法正常工作... 查看详情

CSS3 过渡不适用于显示属性 [重复]

】CSS3过渡不适用于显示属性[重复]【英文标题】：CSS3transitiondoesn\'tworkwithdisplayproperty[duplicate]【发布时间】：2014-04-0122:02:18【问题描述】：每当我悬停其父元素时，我一直在尝试使用css来显示隐藏的Div淡入。到目前为止，我所做... 查看详情

sqPaymentForm 不适用于 IOS 自动填充

】sqPaymentForm不适用于IOS自动填充【英文标题】：sqPaymentFormdoesn\'tworkwithIOSautofill【发布时间】：2018-10-0110:29:07【问题描述】：在任何信用卡表单中，如果我在输入标签中添加id="credit-card-number"或"creditCardNumber"或许多其他关键字，... 查看详情

css 过渡动画不适用于 svg 路径的“d”属性更改

】css过渡动画不适用于svg路径的“d”属性更改【英文标题】：csstransitionanimationdoesn\'tworkonsvgpath\'s"d\'attributechange【发布时间】：2015-12-2004:35:43【问题描述】：jsFiddle我正在尝试将css转换应用于svg各种元素。transition:all2s非常适... 查看详情

为啥 innerText,innerHTML 属性不适用于 javascript 中的输入标签？

】为啥innerText,innerHTML属性不适用于javascript中的输入标签？【英文标题】：WhyinnerText,innerHTMLpropertydoesntworkoninputtagsinjavascript?为什么innerText,innerHTML属性不适用于javascript中的输入标签？【发布时间】：2021-05-2217:46:31【问题描述】：... 查看详情

为啥 Room 实体不适用于 Android 中的不可变属性

】为啥Room实体不适用于Android中的不可变属性【英文标题】：WhyRoomentitiesdon\'tworkwithimmutablepropertiesinAndroid为什么Room实体不适用于Android中的不可变属性【发布时间】：2018-04-2915:36:51【问题描述】：我一直在探索Room数据库对象映射... 查看详情

ul 填充不适用于浮动 img 旁边

】ul填充不适用于浮动img旁边【英文标题】：ulpaddingnotapplyingnexttoafloatingimg【发布时间】：2014-05-2812:27:42【问题描述】：我有一个非常基本的CSS问题。我的左上角有一个带有margin-right的浮动图像。内容由带有项目符号的段落和列... 查看详情

NSPredicate 不适用于核心数据中的抽象实体属性

】NSPredicate不适用于核心数据中的抽象实体属性【英文标题】：NSPredicatenotworkingwithabstractentityattributesincoredata【发布时间】：2013-06-2222:21:09【问题描述】：我有一个核心数据类SSSLicense，它具有名称和类型等属性。它继承自一个名... 查看详情

Gradle 导出属性不适用于 Spring 中的 gradle bootRun

】Gradle导出属性不适用于Spring中的gradlebootRun【英文标题】：GradleexportedpropertiesdontworkwithgradlebootRuninSpring【发布时间】：2017-02-0620:13:51【问题描述】：在我的SpringBoot项目中，我在gradle中有以下片段，它将gradle属性导出到SpringEnviron... 查看详情

必需属性不适用于Angular Js中的文件输入

】必需属性不适用于AngularJs中的文件输入【英文标题】：RequiredattributeNotworkingwithFileinputinAngularJs【发布时间】：2013-04-1821:38:58【问题描述】：我的表单中有一个文件上传控件。我正在使用AngularJS。当我输入所需的属性来验证文件... 查看详情

淘汰赛中的数据绑定不适用于多个属性

】淘汰赛中的数据绑定不适用于多个属性【英文标题】：Databindinknockoutisnotworkingformultipleattributes【发布时间】：2019-03-1914:13:27【问题描述】：我有一个带有数据绑定的以下div标签它给出以下错误绑定值:visible:showBannerMessage,style:bac... 查看详情