当前位置: 首页 > news >正文

CSS opacity设置不透明度

  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>

 

转载于:https://www.cnblogs.com/whylinux/p/10364232.html

相关文章:

  • runC爆严重安全漏洞,主机可被攻击!使用容器的快打补丁
  • CH5102 Mobile Service
  • 区块链共识机制优缺点对比都是什么
  • Python数据可视化的10种技能
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • sql语句实战
  • 小程序微服务单个SSL证书部署多个项目解决方案
  • Async注解的使用,异步进行代码解耦
  • 我们在编写python代码时应该注意那几件事 !
  • Collection和Collections的区别是什么?
  • 根据出生日期计算年龄
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • centos7系统安装完成初始化
  • tkinter内嵌Matplotlib系列(一)之解读官网教材
  • SpringMvc4.0.0+Spring4.0.0+Mybatis3.2.7整合开发
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 345-反转字符串中的元音字母
  • canvas 五子棋游戏
  • dva中组件的懒加载
  • Java|序列化异常StreamCorruptedException的解决方法
  • Mac转Windows的拯救指南
  • PHP的类修饰符与访问修饰符
  • React 快速上手 - 06 容器组件、展示组件、操作组件
  • Three.js 再探 - 写一个跳一跳极简版游戏
  • Webpack 4 学习01(基础配置)
  • 从重复到重用
  • 关于 Cirru Editor 存储格式
  • 配置 PM2 实现代码自动发布
  • 前端设计模式
  • 如何在 Tornado 中实现 Middleware
  • 如何在GitHub上创建个人博客
  • 主流的CSS水平和垂直居中技术大全
  • nb
  • ​一、什么是射频识别?二、射频识别系统组成及工作原理三、射频识别系统分类四、RFID与物联网​
  • #我与Java虚拟机的故事#连载12:一本书带我深入Java领域
  • (42)STM32——LCD显示屏实验笔记
  • (5)STL算法之复制
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)ssm高校运动会管理系统 毕业设计 020419
  • (亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)...
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • (转)Linux NTP配置详解 (Network Time Protocol)
  • (转)Oracle存储过程编写经验和优化措施
  • (转)德国人的记事本
  • **PHP分步表单提交思路(分页表单提交)
  • .NET BackgroundWorker
  • .NET Core跨平台微服务学习资源
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • .NET 解决重复提交问题
  • .net 无限分类
  • .Net中wcf服务生成及调用
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)
  • :如何用SQL脚本保存存储过程返回的结果集