CSS3 opacity 属性

全栈程序员-站长 • 2022年5月9日上午7:00 • 未分类 • 阅读 43

CSS3 opacity 属性设置div元素的不透明级别1、属性opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。2、语法op…

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

设置 div 元素的不透明级别

1、属性

opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。

当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。

2、语法

opacity: value|inherit;

值	描述
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。

3、案例分析

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>调整元素透明度</title>
        <style type="text/css"> .light{ 
     width: 200px; height: 20px; background-color: blue; opacity: 0; } .medium{ 
     width: 200px; height: 20px; background-color: blue; opacity: 0.5; } .heavy{ 
     width: 200px; height: 20px; background-color: blue; opacity: 1; } .father{ 
     width: 400px; height: 20px; background-color: blue; opacity: inherit; } </style>
    </head>
    <body>
    <div class="light">元素完全透明</div>
    <div class="medium">元素半透明</div>
    <div class="heavy">元素完全不透明</div>
    <div class="father">
        <div class="son">元素跟随父元素继承 opacity 属性的值</div>
    </div>


    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ti2beDIb-1584675708999)(D:\DAYNOTE\opacity.png)]$

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/141095.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

java定时任务接口ScheduledExecutorService

java定时任务接口ScheduledExecutorService一、ScheduledExecutorService设计思想ScheduledExecutorService,是基于线程池设计的定时任务类,每个调度任务都会分配到线程池中的一个线程去执行,也就是说

全栈程序员-站长
2022年7月1日
idea

idea远程debug weblogic_idea远程调试代码

idea远程debug weblogic_idea远程调试代码https://blog.csdn.net/u013559614/article/details/123375027Idea远程调试tomcatIdea配置配置remote传输方式，默认为SocketSocket：macOS及Linux系统使用此种传输方式；Sharedmemory：Windows系统使用此种传输方式。调试模式，默认为AttachAttach：此种模式下，调试服务端（被调试远程运行的机器）启动一个端口等待我们（调试客户端）去连接；

全栈程序员-站长
2022年9月10日
kong网关教程_putty登录路由器

kong网关教程_putty登录路由器kong安装kong介绍kong安装kong支持在多个环境下安装，这里就列出在ubuntu和docker下怎么安装，其他的安装的方式请参照官方指南ubuntuubuntu下安装kong离线安装下载对应版本的离线包安装依赖组件apt-getinstallopenssllibpcre3procpsperl安装kongdpkg-ikong-1.4.2.*.d…

全栈程序员-站长
2022年9月4日
2019 最新 Kali2.0可用国内源更新sources.list

2019 最新 Kali2.0可用国内源更新sources.listleafpad/etc/apt/sources.list#中科大debhttp://mirrors.ustc.edu.cn/kalikali-rollingmainnon-freecontribdeb-srchttp://mirrors.ustc.edu.cn/kalikali-rollingmainnon-freecontrib#阿里云debh…

全栈程序员-站长
2022年5月8日
SQL嵌套查询_sql嵌套查询返回多个字段

SQL嵌套查询_sql嵌套查询返回多个字段说到嵌套查询，首先得理解嵌套查询是什么意思，简单来说就是，一个查询语句可以嵌套在另外一个查询语句的where子句中。外层的查询称为父查询(主查询)，内层的查询称为子查询(从查询)。嵌套查询的工作方式是由内向外的，即先进行内层查询，外层查询则利用内层查询的结果集作为条件进行查询。当然，嵌套查询不仅仅是select语句的专属，它还可以用在update、insert、delete语句中。如(update…

全栈程序员-站长
2022年8月10日
两种方法在VMware中安装VMware Tools

两种方法在VMware中安装VMware ToolsVMwareTools的主要作用是虚拟硬件的驱动，鼠标的无缝移出移入，剪贴板共享，共享主机上的文件夹等功能。方法一1.打开文件夹-Ubuntu17.10amd64(根据自己版本来看)。2.在VMwareWorkstation主界面点击菜单“虚拟机”。会弹出提示框，点击是。3.保持网络状态，等待后台下载，下载后会出现一个压缩包。在下载过程中可能会出现DVD图标…

全栈程序员-站长
2022年5月26日

发表回复

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