首页 > web前端 > css教程 > CSS3 渐变可以使用 Alpha 透明度吗?

CSS3 渐变可以使用 Alpha 透明度吗?

Patricia Arquette
发布: 2024-12-10 09:00:20
原创
829 人浏览过

Can CSS3 Gradients Use Alpha Transparency?

结合 CSS3 透明度和渐变

CSS3 呈现了 rgba 和渐变功能的有趣组合。是否可以将这些功能结合在一起,允许根据 CSS 规范无缝调整 alpha 透明度的渐变?

答案:

确实,可以合并rgba 到 webkit 和 moz 渐变声明中。这是一个示例:

Webkit 渐变:

background-image: -webkit-gradient(
  linear, left top, left bottom,
  from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)),
  color-stop(.5,#333333)
);
登录后复制

Mozilla 渐变 (Firefox 3.6 ):

background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%,
  rgba(255, 255, 255, 0) 95%
);
登录后复制

甚至 Internet Explorer 也使用独特的“扩展十六进制”语法提供此功能。代码中的第一对代表不透明度级别:

Internet Explorer 渐变:

filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);
登录后复制

以上是CSS3 渐变可以使用 Alpha 透明度吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板