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. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

  2. spring boot:spring security实现oauth2+jwt管理认证授权及oauth2返回结果格式化(spring boot 2.3.3)

    一,为什么oauth2要整合jwt? 1,OAuth2的token技术有一个最大的问题是不携带用户信息,所以资源服务器不能进行本地验证, 以致每次对于资源的访问,资源服务器都需要向认证服务器的toke ...

  3. C#一行代码实现（01）最小化到通知区域

    主要功能 实现Winform程序最小化后,隐藏任务栏显示,在通知区域显示.左键点击通知区域图标,可以弹出菜单,包含开机启动和退出程序,可以根据需求进行定制. 一行代码 private void For ...

  4. 老司机谈谈如何学习STM32嵌入式系统

    一.嵌入式系统的概念 着重理解"嵌入"的概念 ,主要从三个方面上来理解. 首先,从硬件上,"嵌入"是基于CPU的处围器件的,整合到CPU芯片内部,就好比早期基于 ...

  5. MyBatis 原理浅析——基本原理

    前言 MyBatis 是一个被广泛应用的持久化框架.一个简单的使用示例如下所示,先创建会话工厂,然后从会话工厂中打开会话,通过 class 类型和配置生成 Mapper 接口的代理实现,最后使用 Ma ...

  6. Java学习的第四十九天

    1.构造函数 import java.util.Scanner; public class Cjava { public static void main(String[]args) { Time t ...

  7. PHP 获取当前页面的URL信息

    //获取当前的域名: echo $_SERVER['SERVER_NAME']; //获取来源网址,即点击来到本页的上页网址 echo $_SERVER["HTTP_REFERER" ...

  8. 系统日志报错i8042prt无法加载

    原因如下: 解决方法为: 此报错可以直接忽略,不过由此可能导致即插即用(plugplay)报错,在即插即用报错时,重启服务器即可.

  9. uniapp微信小程序分享

    触发代码 如: <button open-type="share">分享</button> 在JS中 分享进入页面传参,和微信小程序路由传参的思路是一样的. ...

  10. dubbo2.7.X版本带来的服务注册和服务调用方式改变

    参考地址:https://www.cnblogs.com/alisystemsoftware/p/13064620.html 注册中心数据结构格式改变(service:接口服务,application ...