css opacity属性_CSS中的opacity属性[通俗易懂]

css opacity属性_CSS中的opacity属性[通俗易懂]cssopacity属性CSS|不透明度属性(CSS|opacityProperty)Withthegrowingneedofmakingwebsites,theneedforstylingthemhasalsoincreased.Therefore,CSShasbecomeanindispensablepartofcreating…

大家好,又见面了,我是你们的朋友全栈君。

css opacity属性

CSS | 不透明度属性 (CSS | opacity Property)

With the growing need of making websites, the need for styling them has also increased. Therefore, CSS has become an indispensable part of creating websites. Thus one must be aware of which properties to use while creating a website.

随着制作网站的需求不断增长,对网站进行样式设计的需求也越来越大。 因此,CSS已成为创建网站必不可少的部分。 因此,必须知道创建网站时要使用哪些属性。

Various properties are used for styling. Since there are so many properties to use for, it is natural for any beginner to get confused about which property to use and when.

使用各种属性进行样式设置。 由于要使用的属性太多,因此任何初学者都自然会对使用哪个属性以及何时使用感到困惑。

In this segment, the discussion will be on one such property which is known as opacity.

在这一部分中,将讨论一种称为opacity的属性。

Before implementing opacity property right away let’s first discuss this property out of the CSS’s context.

在马上实现opacity属性之前,让我们首先在CSS上下文之外讨论该属性。

不透明度属性 (opacity property)

opacity is the degree of transparency of any element living or non living. If we say that a certain object is opaque then it means that object has 0 transparency, which in turn means that no one can look through that object.

不透明性是指任何存在或不存在的元素的透明程度 。 如果我们说某个对象是不透明的,则意味着该对象的透明度为0 ,这又意味着没有人可以透过该对象查看。

And if we say that a certain object is transparent then that object has 0 opacity.

如果我们说某个对象是透明的,则该对象的不透明度为0

The same meaning of opacity holds in the CSS as well. let’s have a look!

CSS中也具有不透明度的相同含义。 我们来看一下!

Definition: As mentioned earlier the opacity is the degree of transparency. In CSS the opacity property tends to set the opacity of an element.

定义:如前所述, 不透明度是透明度。 在CSS中, opacity属性倾向于设置元素的不透明度

Degrees of Opacity:

不透明度:

  • 1 means that the object is not transparent at all.

    1表示对象根本不透明。

  • 0.5 means that the object is semi-transparent.

    0.5表示对象是半透明的。

  • 0 means that the object is entirely transparent.

    0表示对象是完全透明的。

Note: The drawback of opacity property is that if you set your elements to be transparent then all the children of attributes will also become transparent. If you want to avoid this and want to make your texts readable inside the element, then you should RGBA values instead.

注意: opacity属性的缺点是,如果将元素设置为透明的,则所有属性的子元素也将变为透明的。 如果要避免这种情况,并希望使文本在元素内可读,则应改为RGBA值

The default value of opacity is 1.

不透明度的默认值为1。

CSS Syntax:

CSS语法:

    Element{
        opacity: number|initial|inherit;
    }

Example:

例:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
   
   
            background-color: green;
            opacity: 0.55;
        }
    </style>
</head>

<body>
    <div>This following div element's opacity is 0.55</div>
    <div>The background colour is affected by the opacity level.</div>
</body>

</html>

Output

输出量

CSS | opacity property example

In the above example, the opacity level of 0.55 is applied to the div element.

在上面的示例中,将不透明度级别0.55应用于div元素。

Value Description
number This specifies the opacity from 0.0 ( transparent) to 1.0 ( opaque).
initial This sets this property to its default value.
inherit Helps in inheriting this property from its parent element.
描述
这将不透明度指定为0.0(透明)到1.0(不透明)。
初始 将此属性设置为其默认值。
继承 帮助从其父元素继承此属性。

Conclusion:

结论:

When it comes to using opacity property one should be very considerate in using it as given its drawback this property can also make your sub-elements opaque as well.

在使用不透明度属性时,应谨慎使用它,因为它的缺点是该属性也会使子元素也变得不透明。

opaque property is a very good tool when it comes to styling pictures. So have fun using it!

对于图片样式, 不透明属性是一个非常好的工具。 祝您使用愉快!

翻译自: https://www.includehelp.com/code-snippets/opacity-property-in-css.aspx

css opacity属性

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141184.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 鼠标滚轮编码器工作原理_速度编码器工作原理

    鼠标滚轮编码器工作原理_速度编码器工作原理鼠标滚轮一旦出现滚动跳动,不连贯,基本都要换,修鼠标会经常遇到,好奇之下想了解一下这个小东西的原理。滚轮一端插在这个转盘里面,我们滚动滚轮时候,转盘被带动旋转,产生脉冲信号,电脑依靠这个信号判断滚轮的旋转方向和速度。我们拆一个机械编码器来看看。就是这个小东西,特别简单有没有,一共就4个零件最左边是铁壳,上面一般会有厂家信息,安装高度,和寿命等比如这个,安装高度10毫米,寿命500万圈。PS:一般普通的鼠标,都是选用安装高度为11mm,但还是要自己量清楚。这里需要注意的是,安装

  • Flowable 6.7.0版本新功能特性

    Flowable 6.7.0版本新功能特性Flowable6.7.0版本主要增强的是BPM异步功能:1、实现了全局锁定机制,以更好地支持在具有多个Flowable引擎的设置中使用异步执行器2、添加了对多实例变量聚合的支持3、当多实例是一个自动步骤或一系列自动步骤时,为异步多实例使用添加了一个优化标志。如果设置,引擎将大大降低资源消耗,并删除乐观锁定异常,通常会提高性能4、从Task监听器抛出的异常不再包含在FlowableException中5、在此版本中,已升级到SpringBoot2.5.4和Spri

  • 智能小车设计规划_智能循迹避障小车设计

    智能小车设计规划_智能循迹避障小车设计摘要该课题主要基于单片机的循迹、避障、WiFi、蓝牙等功能的智能小车,在一些特殊环境下有着特殊的意义。硬件控制以arduino为控制核心。采用超声波避障和红外避障传感器共同完成寻迹、避障功能,并将相关信号传送给单片机,经单片机控制系统分析判断后控制驱动芯片驱动直流电机实现小车前进、后退、左转、右转,停止。软件采用移植性较好的c语言编写,通过手机蓝牙App实现对智能小车的控制。通过TCP/UD协…

    2022年10月18日
  • 接口测试-Mock测试方法

    接口测试-Mock测试方法一、关于Mock测试1、什么是Mock测试?Mock测试就是在测试过程中,对于某些不容易构造(如HttpServletRequest必须在Servlet容器中才能构造出来)或者不容易获取的比较复杂的对象(如JDBC中的ResultSet对象),用一个虚拟的对象(Mock对象)来创建以便测试的测试方法。2、为什么要进行Mock测试?Mock是为了解决不同的单元之…

  • 查找历史市盈率

    查找历史市盈率https://www.zhihu.com/question/28424413

  • AutoEventWireup

    AutoEventWireup
      Google了一番,大家讨论AutoEventWireup问题可不少,Page指令的AutoEventWireup属性被设置为true(或者如果缺少此属性,因为它默认为true),该页框架将自动调用页事件,即Page_Init、Page_Load等14个方法,在这种情况下,不需要任何显式的Handles子句或委托。但这是怎么实现的呢?.net又怎样根据AutoEventWireup属性来动态编译或者预编译页面呢?我在Google上没有找到答案。
     

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号