热门标签 | 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/




推荐阅读
  • 在Android开发中,BroadcastReceiver(广播接收器)是一个重要的组件,广泛应用于多种场景。本文将深入解析BroadcastReceiver的工作原理、应用场景及其具体实现方法,帮助开发者更好地理解和使用这一组件。通过实例分析,文章详细探讨了静态广播的注册方式、生命周期管理以及常见问题的解决策略,为开发者提供全面的技术指导。 ... [详细]
  • 本文介绍了如何在iOS平台上使用GLSL着色器将YV12格式的视频帧数据转换为RGB格式,并展示了转换后的图像效果。通过详细的技术实现步骤和代码示例,读者可以轻松掌握这一过程,适用于需要进行视频处理的应用开发。 ... [详细]
  • 我正在使用 Ruby on Rails 构建个人网站。总体而言,RoR 是一个非常出色的工具,它提供了丰富的功能和灵活性,使得创建自定义页面变得既高效又便捷。通过利用其强大的框架和模块化设计,我可以轻松实现复杂的功能,同时保持代码的整洁和可维护性。此外,Rails 的社区支持也非常强大,为开发过程中遇到的问题提供了丰富的资源和解决方案。 ... [详细]
  • 深入解析 Django 中用户模型的自定义方法与技巧 ... [详细]
  • 经过两天的努力,终于成功解决了半平面交模板题POJ3335的问题。原来是在`OnLeft`函数中漏掉了关键的等于号。通过这次训练,不仅加深了对半平面交算法的理解,还提升了调试和代码实现的能力。未来将继续深入研究计算几何的其他核心问题,进一步巩固和拓展相关知识。 ... [详细]
  • 在探讨Hibernate框架的高级特性时,缓存机制和懒加载策略是提升数据操作效率的关键要素。缓存策略能够显著减少数据库访问次数,从而提高应用性能,特别是在处理频繁访问的数据时。Hibernate提供了多层次的缓存支持,包括一级缓存和二级缓存,以满足不同场景下的需求。懒加载策略则通过按需加载关联对象,进一步优化了资源利用和响应时间。本文将深入分析这些机制的实现原理及其最佳实践。 ... [详细]
  • 蓝桥杯物联网基础教程:通过GPIO输入控制LED5的点亮与熄灭
    本教程详细介绍了如何利用STM32的GPIO接口通过输入信号控制LED5的点亮与熄灭。内容涵盖GPIO的基本配置、按键检测及LED驱动方法,适合具有STM32基础的读者学习和实践。 ... [详细]
  • 在Android 4.4系统中,通过使用 `Intent` 对象并设置动作 `ACTION_GET_CONTENT` 或 `ACTION_OPEN_DOCUMENT`,可以从相册中选择图片并获取其路径。具体实现时,需要为 `Intent` 添加相应的类别,并处理返回的 Uri 以提取图片的文件路径。此方法适用于需要从用户相册中选择图片的应用场景,能够确保兼容性和用户体验。 ... [详细]
  • 在前文探讨了Spring如何为特定的bean选择合适的通知器后,本文将进一步深入分析Spring AOP框架中代理对象的生成机制。具体而言,我们将详细解析如何通过代理技术将通知器(Advisor)中包含的通知(Advice)应用到目标bean上,以实现切面编程的核心功能。 ... [详细]
  • HBase Java API 进阶:过滤器详解与应用实例
    本文详细探讨了HBase 1.2.6版本中Java API的高级应用,重点介绍了过滤器的使用方法和实际案例。首先,文章对几种常见的HBase过滤器进行了概述,包括列前缀过滤器(ColumnPrefixFilter)和时间戳过滤器(TimestampsFilter)。此外,还详细讲解了分页过滤器(PageFilter)的实现原理及其在大数据查询中的应用场景。通过具体的代码示例,读者可以更好地理解和掌握这些过滤器的使用技巧,从而提高数据处理的效率和灵活性。 ... [详细]
  • JDK 1.8引入了多项并发新特性,显著提升了编程效率。本文重点探讨了LongAdder和StampedLock的特性和应用场景。此外,还介绍了在多线程环境中发生死锁时,如何通过jps命令进行诊断和排查,提供了详细的步骤和示例。这些改进不仅增强了系统的性能,还简化了开发者的调试工作。 ... [详细]
  • RxJava 中 Observable.singleElement() 方法详解与实例代码分析 ... [详细]
  • 如何在Spark数据排序过程中有效避免内存溢出(OOM)问题
    本文深入探讨了在使用Spark进行数据排序时如何有效预防内存溢出(OOM)问题。通过具体的代码示例,详细阐述了优化策略和技术手段,为读者在实际工作中遇到类似问题提供了宝贵的参考和指导。 ... [详细]
  • 利用C#技术实现Word文档的动态生成与编辑
    本文通过一个简单的示例,介绍了如何使用C#语言实现Word文档的动态生成与编辑功能。文章详细阐述了在项目中引用Word动态库的方法,并通过具体代码示例展示了如何创建和操作Word表格。此内容旨在为初学者提供参考和学习资料,欢迎读者提出宝贵意见和建议。 ... [详细]
  • 开发心得:深入探讨Servlet、Dubbo与MyBatis中的责任链模式应用
    开发心得:深入探讨Servlet、Dubbo与MyBatis中的责任链模式应用 ... [详细]
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社区 版权所有