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>
CSS opacity设置不透明度的更多相关文章
- CSS中的opacity,不透明度的坑
opacity的用法示例如下 /* 值是0到1之间的数值 */ opacity:0.5 opacity设置在元素上的时候,会出现什么效果? 答曰:如果不设置opacity的话,会显示效果为A(可以理解 ...
- css中使用rgba和opacity设置透明度的区别
1.使用rgba设置背景色的透明 效果如下: <body> <div id="box"> 你好啊! </div> </body> b ...
- css怎么样设置透明度?
css怎么样设置透明度?下面本篇文章就来给大家介绍一下使用css设置透明度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中想要设置透明度,可以使用opacity属性 ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
- 超链接字体颜色设置(通过html/css的设置方法)
超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...
- HTML+CSS样式设置——CSS一学就会
HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...
- css字体设置
css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
随机推荐
- v-model数据绑定分析
v-model数据绑定分析 v-model是Vue提供的指令,其主要作用是可以实现在表单<input>.<textarea>及<select>等元素以及组件上创建双 ...
- Spring mvc文件上传实现
Spring mvc文件上传实现 jsp页面客户端表单编写 三个要素: 1.表单项type="file" 2.表单的提交方式:post 3.表单的enctype属性是多部分表单形式 ...
- DockerFile系统的学习
1.背景 DockerFile定义:用来构建Docker镜像的文件,有脚本命令组成. 自定义镜像并运行步骤:编写dockerFile文件-->docker build为镜像-->docke ...
- Zookeeper入门看这篇就够了
https://blog.csdn.net/java_66666/article/details/81015302
- Java 8 中的抽象类和接口到底有啥区别?
上一篇栈长发了这篇<Java 8 有多牛逼?打破一切你对接口的认知!>,帮助许多人解开了疑惑,还有读者留言说两者还有啥区别,故引发了此篇: 在我们面试时也会经常遇到面试官问抽象类和接口的区 ...
- vue渐进式开发的理解和指令
1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...
- USB引脚属性
1.各型号usb 2.type c接口 type c母头 type c公头 usb type c三种工作模式: usb 3.1有三种工作模式: 1:DRP.主HOST/DEVICE可自由转换,类似电脑 ...
- B. Psychos in a Line 解析(思維、單調棧)
Codeforce 319 B. Psychos in a Line 解析(思維.單調棧) 今天我們來看看CF319B 題目連結 題目 給一個數列,如果相鄰兩數,左邊大於右邊,那麼就可以殺死右邊的數字 ...
- robotframework执行UI自动化时不能运行谷歌浏览器的问题
robotframework执行UI自动化时报错,查看日志显示Parent suite setup failed: Variable '${browser}' not found. Did you m ...
- DP百题练索引
就是一篇还在咕的文章 DP百题练(一) DP百题练(二) DP百题练(三)