css透明度

rgba与opacity 在第一个例子中，我们只让背景颜色变得透明，而第二个例子用到opacity属性，让整个元素都变得透明，包含元素中含的内容。 使用opacity把一个元素设置为透明后，将无法再让其子元素变得不那么透明。 body{ background-color: rgba(254,219,207,0.5); } body{ background-color: #FEDBCF; opacity:0.5; } 补充：transparent transparent属性用来指定全透明色彩,transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。 在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。 在CSS2中，border-color也开始接受transparent作为参数值， 《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。 在CSS3中，transparent被延伸到任何一个有color值的属性上。 来源： https://www.cnblogs.com/L-xmin/p/12395050.html

一、透明度设置 opacity 用法： opaticy:0-1; 2.rgba 用法： rgba:(0-255,0-255,0-255,0-1) 透明度取值均为0-1之间。其中，0代表完全透明，1代表完全不透明。 注：若取值超出范围（小于0或大于1），那么会就近取合法值。如取1.2则按1显示，取负数按0显示。 举例： html: 这里是box1 这里是box2 这里是box3 css: (img) 我们将上例子中的opacity改为rgba再看 ``` css: .box1{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 1);} .box2{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0.5);} .box3{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0);} [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JW0lzFqi-1583117743352)(https://i.loli.net/2020/03/01/Zr1d7BPEQ8MOsi3.png)] 二、透明度属性 仔细观察上面两个例子

透明往往能产生不错的网页视觉效果，先奉上 兼容主流浏览器的 CSS 透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持 firefox , Safari和 Opera. filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1. -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。 -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。 CSS透明度继承问题 但CSS的透明属性涉及到一个继承问题，当为父级元素设置透明度后，子元素将自动继承其透明度，比如本站的一个效果: 即使你又为子元素指定透明度为1也是无效的。 对于子元素是文字的情况，我的解决方法一般是如果多少还能够看清，就不管。另一个折衷的方法是，为文本子元素指定一个相对更深的颜色。也就是说，当子元素继承透明度后，所得到的文本颜色正好就是你想要的。前提是，这个颜色还有加深的可能，和需要详细的计算颜色和透明度的值。 还有“ 取消透明度继承 ”的说法

CSS透明属性详解 透明往往能产生不错的网页视觉效果，先奉上 兼容主流浏览器的 CSS 透明代码: .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} 上面的几个属性分别是: opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持 firefox , Safari和 Opera. filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1. -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。 -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。 CSS透明度继承问题 但CSS的透明属性涉及到一个继承问题，当为父级元素设置透明度后，子元素将自动继承其透明度，比如本站的一个效果: 即使你又为子元素指定透明度为1也是无效的。 对于子元素是文字的情况，我的解决方法一般是如果多少还能够看清，就不管。另一个折衷的方法是，为文本子元素指定一个相对更深的颜色。也就是说，当子元素继承透明度后，所得到的文本颜色正好就是你想要的。前提是，这个颜色还有加深的可能，和需要详细的计算颜色和透明度的值。 还有“ 取消透明度继承 ”的说法

是否可以在SVG填充颜色上设置透明度或alpha级别？ 我尝试在fill标签中添加两个值（将其从fill =“＃044B94”更改为fill =“＃044B9466”），但这不起作用。 #1楼 fill="#044B9466" 这是SVG内部以十六进制表示的 RGBA颜色 ，由十六进制值定义。 这是有效的，但并非所有程序都能正确显示它... 您可以在此处找到此语法的浏览器支持： https ： //caniuse.com/#feat=css-rrggbbaa 截至2017年8月：RGBA填充色将在Mozilla Firefox（54），Apple Safari（10.1）和Mac OS X Finder的“快速查看”中正确显示。 但是，谷歌浏览器在版本62之前不支持此语法（之前版本54支持启用实验平台功能标记）。 #2楼 在SVG元素中使用属性 fill-opacity 。 默认值为1，最小值为0，步骤使用十进制值EX：0.5 = alpha的50％。 注意：必须定义 fill 颜色以应用 fill-opacity 。 看看 我的例子 。 参考文献 。 #3楼 为了使填充完全透明， fill="transparent" 似乎适用于现代浏览器。 但它不适用于Microsoft Word（适用于Mac），我不得不使用 fill-opacity="0" 。 #4楼

背景 next版本为7.6.0 next博客主题板块使用白色，会遮盖我们加上去的特效，网上有很多方法修改透明度，但是大多数在内容板块的修改上却无效 演示 效果演示： https://biqianhan-zidi.github.io 方法 其他板块的透明度可以去网上找，根据它的设置 内容板块在 next\source\css_schemes\Gemini\index.styl 里 .post-block背景设置为rgba(255,255,255,0.5) 0.5是透明度可以自己调整 来源： CSDN 作者： 夜沐零 链接： https://blog.csdn.net/qq_43414603/article/details/104113198

box-shaodw 在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子： div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 希望 hover 的时候，盒阴影从 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 过渡到 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)。 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) OK，最简单的方法当然是： div:hover { width: 100px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF） 因为过渡动画是在两个不同的盒阴影状态在发生，所以在过渡动画的时间内，浏览器会不断的重绘盒阴影。而又由于阴影属于耗性能样式，所以这种动画给人的感觉多少有些卡顿。 这里有一个小技巧可以优化这种情况下的阴影动画。

HTML/CSS标签透明度效果的实现 在HTML+CSS编程中,实现半透明背景，通常有3中做法，分别是使用RGBA，PNG和CSS filter。 方法一. 第一种是HTML5的透明，在H5中支持透明背景颜色，但遗憾的是，H5中的办透明背景颜色只支持 rgba的写法，不支持16进制的写法如： background-color:rgba(0,152,50,0.7);// -->70%的不透明度 background-color:transparent;支持完全透明 在传统浏览器中，IE浏览器的独特性也是某些透明度设置的不确定性因素 一般来说，firefox和webkit,khtml阵营中实现透明的方式非常简单，也包括IE9+及大于IE9的浏览器使用上述HTML5设置透明。但是此方法，在IE9以下的浏览器中完全无效。 方法二 第二种是使用半透明粒子图片，图案或者渐变半透明PNG图片，这种方法是兼容性兼容性的，除了IE6需要使用插件来修改PNG不透明的bug外， 支持性非常好,设置可以重复，还可以定位，在H5中也可以设置大小，不过在网页中追求极致的话加载图片越少越好。 （粒子：透明度匀称的图片裁剪至5px * 5px以下，这样加载速度要快的多） background:url(path/my_png_bg.png) no-repeat center center scroll; 方法三.

我分别美化了几个不同版本的Next主题，这里把美化代码公布出来，第一种Next版本小于7.3可使用，美化效果如下。 直接修改 \themes\next\source\css\_custom 将以下美化过程复制到 custom.styl 目录即可。 // ************************************************************************************************ // 全局布局美化代码 (包括,主页背景颜色,主页透明度等全局配置) // By: lyshark www.blib.cn lyshark.cnblogs.com // ************************************************************************************************ // 添加主页背景图片与背景颜色 /*body { // background:url(https://source.unsplash.com/random/1600x900); background:url(/images/background.jpg); background-repeat: no-repeat; background-attachment:fixed;

让花里胡哨的特效变简单 wow.js动画class介绍 引入css样式以及js插件 <link rel="stylesheet" type="text/css" href="./css/animate.min.css"> <script src="./js/wow.min.js"></script> <script> new WOW().init(); </script> wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值 wow bounceIn 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值 wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度） wow slideInDown 从上往下、上来后固定到设定位置