热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS不透明度属性和图像不透明度说明

Theopacitypropertycontrolshowopaqueanelementisonascaleof0.0to1.0.Thelowerthevalue,themoret

The opacity property controls how opaque an element is on a scale of 0.0 to 1.0. The lower the value, the more transparent the element is.

opacity属性控制元素在0.0到1.0范围内的opacity 。 值越低,元素越透明。

You can choose up to what extent you want to make the element transparent. You have to add the following CSS property to achieve the transparency levels.

您可以选择要使元素透明的程度。 您必须添加以下CSS属性以实现透明度级别。

Fully Opaque

完全不透明

.class-name {opacity: 1;
}/* OR */.class-name {opacity: 1.0;
}

Semitransparent

半透明

.class-name {opacity: 0.5;
}

Fully transparent

完全透明

.class-name {opacity: 0;
}/* OR */.class-name {opacity: 0.0;
}

Alternatively, you can use rgba to set the opacity of an element:

另外,您可以使用rgba设置元素的不透明度:

.class-name{background-color: rgba(0, 0, 0, .5);
}

This sets the background-color of an element to black with 50% opacity. The last value in an rgba value is the alpha value. An alpha value of 1 is equal to 100% opacity, and 0.5 (or .5 like above) is equal to 50% opacity.

这会将元素的background-color设置为不透明度为50%的黑色。 rgba值中的最后一个值是alpha值 。 Alpha值1等于100%不透明度,而0.5(或上面的.5)等于50%不透明度。

图像不透明度和透明度 (Image Opacity and Transparency)

The opacity property allows you to make an image transparent by lowering how opaque it is.

opacity属性允许您通过降低图像的opacity来使其透明。

Opacity takes a value between 0.0 and 1.0.

Opacity取值介于0.0到1.0之间。

1.0 is the default value for any image. It is fully opaque.

1.0是任何图像的默认值。 它是完全不透明的。

Example

img {opacity: 0.3;}

Include filter: alpha(opacity=x) for IE8 and earlier. The x takes a value from 0-100.

包括filter: alpha(opacity=x) IE8和更早版本的filter: alpha(opacity=x) 。 x取0-100的值。

img {opacity: 0.3;filter: alpha(opacity=30);
}

Here’s an example of an image set to the parameters in the example above.

这是上面示例中设置为参数的图像的示例。

You can pair opacity with :hover to create a dynamic mouse-over effect.

您可以将opacity:hover配对以创建动态的鼠标悬停效果。

Example:

例:

img {opacity: 0.3;filter: alpha(opacity=30);
}
img:hover {opacity: 1.0;filter: alpha(opacity=100);
}

A codepen example to show a transparent image turning opaque on hover

一个Codepen示例,显示透明图像在悬停时变为不透明

You can create the opposite effect with less code since the image is 1.0 opacity by default

您可以用更少的代码创建相反的效果,因为默认情况下图像的透明度为1.0

Example:

例:

img:hover {opacity: 0.3;filter: alpha(opacity=30);
}

Here's a codepen example to show transparency on mouse-over.

这是一个Codepen示例,显示鼠标悬停时的透明性 。

有关CSS的更多信息 (More about CSS)

级联样式表(CSS) (Cascading Style Sheets (CSS))

CSS is an acronym for Cascading Style Sheets. It was first invented in 1996, and is now a standard feature of all major web browsers.

CSS是层叠样式表的缩写。 它于1996年首次发明,现在已成为所有主要网络浏览器的标准功能。

CSS allows developers to control how web pages look by “styling” the HTML structure of that page.

CSS允许开发人员通过“样式化”页面HTML结构来控制网页的外观。

CSS specifications are maintained by the World Wide Web Consortium (W3C).

CSS规范由万维网联盟(W3C)维护。

You can build some pretty amazing things in CSS alone, such as this pure-CSS Minesweeper game (which uses no Javascript).

您可以单独在CSS中构建一些非常令人惊奇的东西,例如此纯CSS Minesweeper游戏 (不使用Javascript)。

翻译自: https://www.freecodecamp.org/news/css-opacity/




推荐阅读
  • 解决JavaScript中法语字符排序问题
    在开发一个使用JavaScript、HTML和CSS的Web应用时,遇到从SQLite数据库中提取的法语词汇排序不正确的问题,特别是带重音符号的字母未按预期排序。 ... [详细]
  • 问题场景用Java进行web开发过程当中,当遇到很多很多个字段的实体时,最苦恼的莫过于编辑字段的查看和修改界面,发现2个页面存在很多重复信息,能不能写一遍?有没有轮子用都不如自己造。解决方式笔者根据自 ... [详细]
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • spring boot使用jetty无法启动 ... [详细]
  • 本文探讨了在UIScrollView上嵌入Webview时遇到的一个常见问题:点击图片放大并返回后,Webview无法立即滑动。我们将分析问题原因,并提供有效的解决方案。 ... [详细]
  • 长期从事ABAP开发工作的专业人士,在面对行业新趋势时,往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法,以及开发者应如何调整技能以适应新的技术环境。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • Beetl是一款先进的Java模板引擎,以其丰富的功能、直观的语法、卓越的性能和易于维护的特点著称。它不仅适用于高响应需求的大型网站,也适合功能复杂的CMS管理系统,提供了一种全新的模板开发体验。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • importjava.io.*;importjava.util.*;publicclass五子棋游戏{staticintm1;staticintn1;staticfinalintS ... [详细]
  • 编译原理中的语法分析方法探讨
    本文探讨了在编译原理课程中遇到的复杂文法问题,特别是当使用SLR(1)文法时遇到的多重规约与移进冲突。文章讨论了可能的解决策略,包括递归下降解析、运算符优先级解析等,并提供了相关示例。 ... [详细]
  • 本文介绍了一种通过设置主题(Theme)来实现快速启动的Android引导页,并详细说明了如何避免因不同屏幕分辨率导致的图片拉伸问题。 ... [详细]
  • PHP函数的工作原理与性能分析
    在编程语言中,函数是最基本的组成单元。本文将探讨PHP函数的特点、调用机制以及性能表现,并通过实际测试给出优化建议。 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
author-avatar
凌微茵_686
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有