首页 前端知识 CSS如何设置透明

CSS如何设置透明

2024-02-28 10:02:41 前端知识 前端哥 843 47 我要收藏

以下介绍三种方法供参考:

设置方法一:

给对应元素添加background-color: transparent;

设置相应代码:

修改之前 :

 

修改之后:

设置方法二 :

给对应元素设置opacity:0;

☆☆☆注意 :  1.opacity准确来讲是设置的"不透明度"(即不透明的程度);

                    2.取值"0~1"之间(0则是完全透明,1则是完全显示);

                    3.要设置的元素里嵌套其他盒子,那其他盒子都会跟随其变化(儿子服从老爸).

添加之前:

添加后:

显示透明:

 

设置方法三:

对其添加CSS过滤器:可以使用CSS的filter属性来添加透明效果,通过使用opacity滤镜实现。

  代码如下:

注意:取值也是0~1 

 

设置方法四:

对其添加伪元素:使用伪元素和背景色:可以使用伪元素 ::before 或 ::after 来创建一个覆盖在原始元素上方的透明元素,并在其上设置背景颜色或图片来实现透明效果。

 代码如下:

 

以上是常用的几种方法供大家参考!!!  有什么问题的欢迎交流学习!!!

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2848.html
标签
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!