css---透明度

最新推荐文章于 2021-12-23 10:54:42 发布
最新推荐文章于 2021-12-23 10:54:42 发布
阅读量477 收藏
点赞数
文章标签： filter 浏览器 ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ealzero/article/details/7006525
版权

 //不透明度为70%

1.ie:  

   语法：filter:alpha(opacity=70);

2.其它主流浏览器：

 

语法：

  -moz-opacity:0.7;
    -khtml-opacity:0.7;          opacity:0.7;

//滤镜

ie：Alpha
  语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)" 
  说明：
  Opacity：起始值，取值为0～100, 0为透明，100为原图。
  FinishOpacity：目标值。

  Style：1或2或3
  StartX：任意值
  StartY：任意值

ealzero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 透明度属性
12-08
除了IE之外，目前主流浏览器， Opera 9.0及更高版本，Safari 1.2(WebKit 125) 及更高版本，chrome等等都支持opacity这个设置透明度的属性，opacity的属性值是0<number<1的数值，默认值是1。 例如50%透明的...
CSS opacity - 实现图片半透明效果的代码
10-30
CSS opacity - 实现图片半透明效果的代码
【总结】CSS透明度大汇总
weixin_30716725的博客
03-31 123
　　近年来，CSS不透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效。 　　这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。 　　关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它...
CSS背景透明度
低至一折起的博客
12-07 354
opacity:1;—-这是不透明 opacity:0;—-这是全透明 opacity:0.7;—-这是透明度为70%filter:alpha(opacity=70);——-这个配置是IE独有的，只有IE可以识别这都是新浏览器的，IE6不支持，IE8以上也是可以直接识别opacity的，opacity为W3C标准的
filter: alpha(opacity:70)
BaiBai
12-04 1087
filter: alpha(opacity:70)可以设置背景的透明度，后面的70是透明度。 正因为IE使用私有属性filter:alpha(opacity)，为了让所有的浏览器都能够支持，所以两个都要进行书写。 ...
display:none和visible:hidden区别
weixin_42371145的博客
01-21 1722
（忘记在哪里参考的了，如果需要注明出处，请私信） 1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 ●visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 ...
CSS:透明度和层叠属性
yiXin_Chen的博客
12-23 313
透明度: 1) 透明度属性: opacity, 不透明度. 值0~1之间. 默认1(不透明). 例: opacity: 0.7; 表示70%不透明 2) 过滤: filter: alpha(opacity=值), 不透明度, 值0~100之间, 默认100 层叠属性: z-index, 值为整数, 可以是负数, 默认0 在有重叠的情况下,z-index 的值越大的,离我们的视野越近. ...
postcss-gradient-transparency-fix:PostCSS插件，可针对较旧的浏览器透明地修复CSS渐变
05-12
PostCSS渐变透明度修复 一个插件，用于修复某些浏览器（看着您，Safari）的渐变透明度。它能做什么短版查找CSS渐变中使用的transparent关键字的所有实例，并尝试将它们替换为特定的颜色值。长版（又称为什么需要） ...
css-grid-layout-generator：构建复杂CSS网格布局的最快，最简单的方法
02-06
CSS网格布局生成器 建立复杂CSS网格布局的最... 不透明度调整 支持负起始/结束行 在工具提示中以CSS规则显示详细信息 网格编辑器 设置自动网格的自定义尺寸 大功能 通过CSS Media Queries进行条件网格设置 嵌套网
html怎样使用透明度通道,HTML 使用CSS 設置透明度Opacity
weixin_39534149的博客
06-11 434
Html/Css標簽透明度效果的實現,在html中，實現半透明背景，在HTML Div+Css編程中，為了實現版透明，通常有3中做法。第一種是HTML5的透明，在H5中支持透明背景顏色，但遺憾的是，H5中的辦透明背景顏色只支持 rgba的寫法，不支持16進制的寫法如：background-color:rgba(0,152,50,0.7);//-->70%的不透明度background-co...
filter:alpha()与opacity
weixin_42143048的博客
02-12 3482
filter:alpha() filter与opacity一样都是设置透明度的，但是opacity 在IE8及以下是不兼容的；所以要设置filter属性； a:hover { opacity: 1; filter: alpha(opacity=100);} 当直接利用opacity设置透明度的时候其大小范围为0-1之间，为1的时候为不透明，当利用filter:alpha()设置opacity...
filter的alpha透明度和opacity透明度区别
ssisse的博客
08-31 5608
filter的alpha透明度与opacity透明度  相同点：都是值为0表示完全透明，值为1表示完全不透明 不同点：alpha可以应用于元素特定的属性（比如背景、边框、文字），且alpha只作用于这个属性。 而opacity会作用于某元素及该元素下的所有属性。
filter:alpha()与opacity的区别
qq_44929535的博客
01-11 3014
filter:alpha()与opacity都是用来设置透明度的，区别就在于兼容性的问题，opacity支持高版本的浏览器，IE8以上不包含IE8. opacity 1.opacity的取值范围在0到1之间，1代表完全不透明。 filter:alpha() 1.filter:alpha(opacity=20）表示设置透明度为20，其中透明度范围为0-100，100为不透明。 2.filter：alpha（opacity，finishopacity，style，startX，startY，finishX，fi
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
热门推荐
freshlover的专栏
12-05 14万+
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。 首
设置背景透明 filter:alpha(opacity=80)
乐杨俊浅谈LAMP
09-12 4699
乐杨俊：设置背景透明 filter:alpha(opacity=80) .transparent_class { filter:alpha(opacity=80); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 如果没效果，可尝试设置固定高度 上面的几个属性分别是: opacity: 0.5; 这是最重要的，因为它是CS...
css中filter:alpha透明度总结
jinhua1314的专栏
03-26 1万+
Alpha，设置透明度。 用法： FILTER:alpha(opacity=80);/* 设置不透明度为80 */ filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全
css background-image 透明度
最新发布
05-22
<h3>回答1：</h3><br/>这个问题的意思是什么是CSS属性background-image的透明度？答案是，CSS属性background-image本身没有透明度选项。如果要调整背景图片的透明度，可以使用CSS属性opacity或rgba()颜色值中的alpha通道。 <h3>回答2：</h3><br/>CSS中可以使用background-image属性设置一个元素的背景图片，而且可以使用opacity属性来设置一个元素的透明度。在设置背景图片时，我们也可以设置其透明度，这样就可以在背景图片上叠加其他内容，同时能够让背景图片透出一定的效果。 要设置背景图片的透明度，可以使用rgba颜色值，其中的a表示透明度（alpha值），值的范围从0到1，0表示完全透明，1表示完全不透明。例如，可以将background-color值设置为rgba(255,255,255,0.5)来使元素以50%的透明度显示白色背景颜色。 同样地，对于背景图片，可以使用rgba颜色值来表示其透明度。例如： ``` div { background-image: url("example.jpg"); background-color: rgba(0, 0, 0, 0.5); } ``` 上面的例子设置了一个div元素的背景图片，并将其透明度设置为50%。这意味着背景图片将会被半透明的黑色背景颜色遮盖。同理，我们可以设置为其他颜色或透明度。 需要注意的是，设置为背景图片的元素的不透明区域将会遮盖背景图片。如果希望背景图片能够透过元素的不透明区域，则可以考虑使用CSS的mask或clip-path属性，或者使用CSS混合模式（mix-blend-mode）来处理透明度的效果。这些方法都需要更高的CSS技能水平，可以在需要时单独研究。 <h3>回答3：</h3><br/>CSS background-image 透明度是指设置背景图片透明度的方法。在实际开发中，为了达到视觉上的美观效果或实现某些特定功能，有时需要将背景图片进行透明或半透明处理。在这种情况下，CSS的background-image属性就可以起到很好的作用。 要设置背景图片的透明度，可以使用background-image中的rgba颜色值。Rgba颜色值包括红、绿、蓝和透明度四个分量，其中透明度取值范围为0~1，0为完全透明，1为完全不透明。在CSS中，rgba颜色值可以直接作为背景颜色设置。 例如，可以使用以下代码设置一个背景图片，并将其透明度设置为50%： ``` background-image: url("example.png"); background-color: rgba(255,255,255,0.5); ``` 这段代码中，background-image指定了背景图片的位置，而background-color则设置了背景颜色为白色，透明度为50%。这样设置后，背景图片会呈现出部分透明的效果，使得前景内容更加突出。 另外，还可以通过CSS3的opacity属性设置整个元素的透明度。例如，使用以下代码设置一个包含文字内容的DIV元素，并将其透明度设置为50%： ``` <div class="example"> <p>这是一段文字内容</p> </div> .example { background-image: url("example.png"); opacity: 0.5; } ``` 这段代码中，DIV元素的背景图片和整体透明度都被设置了。在实际开发中，可以根据具体需求进行灵活设置，以达到最佳的视觉效果。 总之，通过CSS的background-image属性和rgba颜色值，以及opacity属性，都可以实现背景图片的透明或半透明效果。不同的设置方法可以根据具体需求进行选择和组合，以达到最好的视觉效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值