1.opacity设置不透明度

　　　　opacity会将含有这个属性的子类都变成具有opacity属性，可以改变元素、元素内容、字标签的不透明度。而rgba只会改变设置的那个背景颜色的透明度效果

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>03透明度示例</title>

    <style>

        .c1 {

            height: 400px;

            width: 400px;

            background-color: black;

            /*opacity: 0.5;   !* 设置不透明度，可以改变元素内容、子标签的透明度 *!*/

            /*color: red;*/

        }

        .c1 {

            color: red;

           opacity: 0.5;

        }

        .c2 {

            color: red;

            background-color: rgba(0, 0, 0, 0.5);   /* 不会改变元素内容的透明度，只会改变背景的透明度 */

        }

    </style>

</head>

<body>

<div class="c1">设置元素不透明度</div>

<div class="c2">我是c2类的标签</div>

</body>

</html>

CSS opacity设置不透明度的更多相关文章

  1. CSS中的opacity，不透明度的坑

    opacity的用法示例如下 /* 值是0到1之间的数值 */ opacity:0.5 opacity设置在元素上的时候,会出现什么效果? 答曰:如果不设置opacity的话,会显示效果为A(可以理解 ...

  2. css中使用rgba和opacity设置透明度的区别

    1.使用rgba设置背景色的透明 效果如下: <body> <div id="box"> 你好啊! </div> </body> b ...

  3. css怎么样设置透明度？

    css怎么样设置透明度?下面本篇文章就来给大家介绍一下使用css设置透明度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中想要设置透明度,可以使用opacity属性 ...

  4. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  5. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  6. 超链接字体颜色设置(通过html/css的设置方法)

    超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...

  7. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

  8. css字体设置

    css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...

  9. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

  1. spring boot: 通过filter过滤器实现中文的简体繁体字符集转换(spring boot 2.3.1)

    一,为什么要使用filter来实现简繁体转换? 项目中有时会有同时支持简体和繁体两种字符集的要求, 或者搜索引擎有支持繁体输入字符的需求. 针对繁体字符的显示, 我们通常会在数据库和模板.文案配置中默 ...

  2. faker使用

    laravel中faker的方法总结   展开 laravel faker用法总结 安装 composer require fzaninotto/faker   一.基础方法: 随机数:randomD ...

  3. 存储系列1-openfiler开源存储管理平台实践

    (一)openfiler介绍 Openfiler能把标准x86/64架构的系统变为一个更强大的NAS.SAN存储和IP存储网关,为管理员提供一个强大的管理平台,并能应付未来的存储需求.openfile ...

  4. 通过IIS部署，将图片或者视频等文件用http协议网址访问

    打开IIS管理器 又键点击添加网站 然后到这个界面 文件夹里有这些图片,随便用的一些图片 然后我这里用的是局域网测试,所以IP就是wifi的IP地址,如果是服务器的话,直接选服务器本身的IP地址就行了 ...

  5. 关于设置Vscode缩进，保存代码任然缩进无效解决方式

    在Vscode按F1,运行命令,输入Formatter config 把内容更改为以下代码 { "onSave": true, "javascript": { ...

  6. 在java的多态调用中，new的是哪一个类就是调用的哪个类的方法。

    在java的多态调用中,new的是哪一个类就是调用的哪个类的方法.(x) 原因: ava多态有两种情况:重载和覆写 在覆写中,运用的是动态单分配,是根据new的类型确定对象,从而确定调用的方法: 在重 ...

  7. Albert学习记录

    albert相对BERT而言主要有三个改进方向: 1.对Embedding因式分解 在BERT中,词向量维度E和隐层维度H是相等的.而词嵌入学习的是单词与上下文无关的表示,而隐层则是学习与上下文相关的 ...

  8. 4G工业路由器的传输功率是越高越好吗？

    现在人们越来越多的利用运营商网络进行家庭的Wi-Fi上网,早已是非常普遍的事情了.而无线路由器作为设备组网的重要组成部分,与路由器相关的话题.知识总会能够引发大家的热议.这里,以众山物联网研发.生产的 ...

  9. Java学习的第三十二天

    1. 2.综合例题没太看懂 3.明天复习第十二章

  10. 删除指定路径下指定天数之前（以文件的创建日期为准）的文件：BAT + REG + Ritchie Lawrence 日期函数

    代码如下: @echo off::演示:删除指定路径下指定天数之前(以文件的创建日期为准)的文件.::如果演示结果无误,把del前面的echo去掉,即可实现真正删除.::本例调用了 Ritchie L ...