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)


相关推荐

  • android加密参数定位方法

    android加密参数定位方法作者正在编写一本爬虫逆向相关的书籍《书名还没有想好》。目前刚写了50页,上图是文章目录的一部分,想问一下大家现在对哪阶段的内容会更感兴趣,或者哪部分的内容会更有学习力,或者帮我想个书名。可在本文末留言告知,感谢大家。下面开始本文正文内容。在逆向一个Android程序时,如果只是盲目的分析需要阅读N多代码才能找到程序的关键点或Hook点,本文将分享一下如何快速的找到APP程序的加密参数位置,其实不论是找关键位置、找hook点,找加密参数、代码逻辑追踪,都是类似的处理方法。巧用搜索-静态分析

  • ASPCMS_net开源项目

    ASPCMS_net开源项目1.We7CMS【做的还不错,需要保留版权】We7CMS是由西部动力开发的一款充分发掘互联网Web2.0(如博客、RSS等)的信息组织优势,将其理念利用到政府企事业网站的构建、组织、管理中的网站建设和管理方面的产品。系统目标:叫创建网站变成一种简单的艺术创作,简单如创建博客。系统特点简单至上;“一看就会”是我们的创作理念,如果在哪里您看了不会用,请您告诉我们。潜力无限;来自

  • redisson分布式锁续期(redis分布式锁内部原理)

    面试问题Redis锁的过期时间小于业务的执行时间该如何续期?问题分析首先如果你之前用Redis的分布式锁的姿势正确,并且看过相应的官方文档的话,这个问题Soeasy.我们来看很多同学在用分布式锁时,都是直接百度搜索找一个Redis分布式锁工具类就直接用了,其实Redis分布式锁比较正确的姿势是采用redisson这个客户端工具如何回答默认情况下,加锁的时间是30…

  • POJ1149 PIGS 【最大流量】

    POJ1149 PIGS 【最大流量】

  • RT-Thread FinSH控制台添加自定义msh命令原理「建议收藏」

    RT-Thread FinSH控制台添加自定义msh命令原理「建议收藏」FinSH是RT-Thread的命令行组件,提供一套供用户在命令行调用的操作接口,主要用于调试或查看系统信息。它可以使用串口/以太网/USB等与PC机进行通信。FinSH提供了多个宏接口来导出自定义命令,导出的命令可以直接在FinSH中执行。自定义的msh命令,可以在msh模式下被运行,将一个命令导出到msh模式可以使用如下宏接口:MSH_CMD_EXPORT(name,desc);示例如下:voidhellort(void){rt_kpr

  • js 取整数[通俗易懂]

    js 取整数[通俗易懂]1.丢弃小数部分,保留整数部分parseInt(7/2)2.向上取整,有小数就整数部分加1 Math.ceil(7/2)3,四舍五入. Math.round(7/2)4,向下取整 Math.floor(7/2)

发表回复

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

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