简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > 前端问答 > 正文

设置元素透明度的css3属性是什么

青灯夜游
发布： 2021-12-16 11:02:34
原创
2629 人浏览过

设置元素透明度的css3属性有两种：1、opacity属性，可设置元素的透明度级别，语法“opacity:透明度值;”；2、filter属性，与opacity()函数一起使用可设置元素透明度，语法“filter:opacity(值%);”。

设置元素透明度的css3属性是什么

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

设置元素透明度的css3属性

1、opacity属性

Opacity属性设置一个元素了透明度级别。

语法：

opacity: value;
登录后复制

  • value ：指定不透明度；从0.0（完全透明）到1.0（完全不透明）。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<img src="img/2.jpg" />
		<img src="img/2.jpg" style="opacity: 0.5;"/>
	</body>
</html>
登录后复制

1.png

2、filter属性

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

filter 属性与opacity()函数一起使用可设置元素透明度。

  • 值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<img src="img/2.jpg" />
		<img src="img/2.jpg" style="filter: opacity(30%);"/>
	</body>
</html>
登录后复制

2.png

（学习视频分享：css视频教程）

以上是设置元素透明度的css3属性是什么的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
css3
来源：php.cn
上一篇：pre是html5新增的标签吗 下一篇：css3中浮动占有位置吗
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
未捕获的类型错误：无法设置未定义的属性（设置'innerHTML”） 我正在尝试使用php创建一个网页，在“连续文本框”类（由我的类定义）的元素上，单击时必须启动一个Javascript函数，该函数应该更改另一个函数的内容id“harta-modal...
来自于 2023-11-08 21:06:09
0
1
278
带有透明半圆切口的 Div 我想仅使用CSS3制作一个透明的切出半圆形形状。唯一的要求是形成形状的所有元素必须是黑色或透明。我不能使用上面有一个白色圆圈的黑色矩形，因为半圆必须是透明的并让背景显示出来。所需形...
来自于 2023-10-22 17:51:09
0
2
303
如何将透明度应用于CSS颜色变量？ 我正在使用Electron设计一个应用程序，因此我可以访问CSS变量。我在vars.css中定义了一个颜色变量：:root{--color:#f0f0f0;}我想在main.css...
来自于 2023-10-13 15:48:04
0
1
302
如何在CSS颜色变量上应用不透明度？ 我正在使用Electron设计一个应用程序，因此我可以访问CSS变量。我在vars.css中定义了一个颜色变量：:root{--color:#f0f0f0;}我想在main.css...
来自于 2023-10-13 14:43:49
0
1
329
更改背景图像的不透明度，同时保留子元素的可见性 是否可以设置背景图像的不透明度而不影响子元素的不透明度？示例页脚中的所有链接都需要自定义项目符号（背景图像），并且自定义项目符号的不透明度应为50%。HTML<divid=&...
来自于 2023-10-10 19:40:19
0
1
257
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！