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. 生物信息-McScan（Python-jcvi）共线性画图

    比较基因组学中,共线性的分析的图无疑是最漂亮的. 共线性分析可以很好地解释进化关系和多倍化事件. 本文主要介绍的是唐老师的Python版McScan(jcvi工具包),这个包很强大,但是其功能在官网的 ...

  2. .Net Core单元测试规范

    .Net Core单元测试规范 一. 前言 为了有效提升代码质量,保证DevOps的顺利进行.将全面开始采用单元测试进行覆盖,届时单元测试将完全纳入 到完整的持续构建生命周期中做为第一道质量把控的门槛 ...

  3. sql分页 一条语句搞定

    select top 每页条数 * from ( SELECT ROW_NUMBER() OVER (ORDER BY id desc) AS RowNumber,* FROM Article  条件 ...

  4. Shell脚本学习指南笔记（一）

    脚本语言通常是解释型的,这类程序的运行.是由解释器读入程序代码,并将其转换成内部的形式, 再执行,解释器本身是一般的编译型程序. 第一行的开头处使用#!这两个字符,当内核扫描到改行的其余部分,看是否存 ...

  5. hystrix线程池隔离的原理与验证

    引子 幸福很简单: 今天项目半年规划被通过,终于可以早点下班.先坐公交,全程开着灯,买了了几天的书竟然有时间看了.半小时后,公交到站,换乘大巴车.车还等着上人的功夫,有昏暗的灯光,可以继续看会儿书.过 ...

  6. JS对象的各种操作

    对象由若干键值对组成 属性 都是为字符串类型,值 就可以为任意类型 var xiaoming= { name: '小明', 'school': 'No.1 School' }; 访问对象里面的属性,可 ...

  7. linux (简单了解)

    目录 Bash Shell 简单了解 Bash Shell基础语法 一 文件管理 二 用户管理 三权限管理 四 软件管理 什么是Bash Shell 命令的解释,用来翻译用户输入的命令 Bash Sh ...

  8. 如何利用go-zero在Go中快速实现JWT认证

    关于JWT是什么,大家可以看看官网,一句话介绍下:是可以实现服务器无状态的鉴权认证方案,也是目前最流行的跨域认证解决方案. 要实现JWT认证,我们需要分成如下两个步骤 客户端获取JWT token. ...

  9. JavaScript动态显示时间

    <body> <div></div> <script> var div = document.querySelector('div'); retNowT ...

  10. Luogu P4105 [HEOI2014]南园满地堆轻絮

    题解 传送门 其实只要找差距最大的逆序对就好了 答案就是此逆序对的差 /2 代码 (代码很短) #include<bits/stdc++.h> using namespace std; # ...