当前位置: 首页 > 面试题库 >

CSS3透明度+渐变

梁盛
2023-03-14
问题内容

RGBA是非常有趣的,所以是-webkit-gradient-moz-gradient和呃…
progid:DXImageTransform.Microsoft.gradient…是啊。:)

有没有一种方法可以将RGBA和渐变这两者结合起来,以便使用当前/最新的CSS规范可以实现alpha透明度的渐变。


问题答案:

是。您可以在webkit和moz渐变声明中使用rgba:

/* webkit example */
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)
);

(src)

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

(src)

显然,您甚至可以使用奇怪的“扩展十六进制”语法在IE中执行此操作。第一组(在示例55中)指的是不透明度级别:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

(src)



 类似资料:
  • 问题内容: CSS3动画出现问题。 仅当我删除的更改时,此代码才有效。 我想在悬停后立即更改显示,但不透明度应使用过渡进行更改。 问题答案: 我改变了一点,但结果很漂亮。 谢谢大家

  • 如图所示,红色圈起来做横向滚动,如何实现容器左右侧的文字透明度效果?

  • 本文向大家介绍flutter FadeTransition实现透明度渐变动画,包括了flutter FadeTransition实现透明度渐变动画的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了flutter实现透明度渐变动画的具体代码,供大家参考,具体内容如下 flutter 动画状态监听器 AnimationController AnimationController 的常用操作

  • 什么是渐变? 渐变显示两种或多种颜色的组合,如下所示 - 渐变的类型 线性渐变(向下/向上/向左/向右/对角线) 径向梯度 线性渐变 线性渐变用于以线性格式(如从上到下)排列两种或更多种颜色。 从上到下 <html> <head> <style> #grad1 { height: 100px; background

  • CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。 CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradient

  • 本文向大家介绍js实现透明度渐变效果的方法,包括了js实现透明度渐变效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现透明度渐变效果的方法。分享给大家供大家参考。具体分析如下: 这里可实现一开始元素的透明度是30,鼠标移上的时候,透明度慢慢增加,到透明度100停止。鼠标移出,透明度慢慢减少,减少到30的效果。 要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个