opacity 与rgba区别
概念介绍
- rgba(r,g,b,a) r,g,b分别是颜色r g b的值(0-255),a表示透明度(0-1)。
rgba(r,g,b,a)
- opacity: value; value是具体数值,0-1之间 。0:完全透明, 1:完全不透明
opacity: value;
区别
opacity 子元素颜色会被影响,即变相的被继承。rgba(r,g,b,a)不会。举例看下效果,同样一段html
<div class="mask">
<img src="img/nochance.png" class="nochance">
</div>
1. 使用opacity处理
.mask {
background-color: #000;
opacity: .7;
text-align: center;
} .nochance {
width: 80%;
}
2. 使用grba
.mask {
background: rgba(0, 0, 0, .7);
padding-top: 30%;
text-align: center;
}
.nochance {
width: 80%;
}
opacity 与rgba区别的更多相关文章
- 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css基础--深入理解opacity和rgba的区别
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...
- rgba()和opacity之间的区别(面试题)
rgba()和opacity之间的区别: 相同点:rgba()和opacity都能实现透明效果: 不同点:opacity作用于元素,以及元素中所有的内容: rgba()只用于于元素的颜色,及背景色: ...
- 雪碧图(background-position)、overflow、title中的小图标、光标、rgb 和opacity 与rgba
一.background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src url href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...
- 深入了解opacity和rgba
1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) - r为红色值, 正整数 | 百分数 - g为绿色值,正整数 | 百分数 - b为蓝色值,正整数 | 百分数 - a为alpha( ...
- opacity与RGBA透明的区别
为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度 ...
- opacity与rgba
background: rgba(255,255,255,0.6);容器本身透明度变化,它包含的子容器的透明度不变. opacity:0.6;容器及容器包含的子容器的透明度都会发生变化.
- 有关opacity或RGBA设置颜色值及元素的透明值
opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化 opacity声明来 ...
- ie6-ie8不支持opacity,rgba解决方法
半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...
随机推荐
- VirtualDOM与diff(Vue实现)
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- laypage 使用
最近发现一个特别好用的前端分页插件,分享一下 <!doctype html> <html> <head> <meta charset="utf-8& ...
- web项目中js加载慢问题解决思路
最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...
- 高可用之KeepAlived(2):keepalived+lvs
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- Nginx限流办法
Nginx 限流 电商平台营销时候,经常会碰到的大流量问题,除了做流量分流处理,可能还要做用户黑白名单.信誉分析,进而根据用户ip信誉权重做相应的流量拦截.限制流量.Nginx自身有的请求限制模块ng ...
- 编程中&和&&的区别
逻辑电路中用&: 与门电路,全真为真,有假为假. 编程中:&表示取地址符(C)和 按位与(非bool类型时,转换成二进制,按位与运算). &&表示逻辑与运算,& ...
- PHP opcache扩展安装
下面是我在PHP 5.4下的安装方法: https://pecl.php.net/get/zendopcache-7.0.5.tgz tar xzf zendopcache-7.0.5.tgz cd ...
- 轻松掌握VS Code开发.Net Core及创建Xunit单元测试
前言 本篇文章主要还是介绍使用 VS Code 进行.Net Core开发和常用 CLI命令的使用,至于为啥要用VS Code ,因为它是真的是好看又好用 :) ,哈哈,主要还是为了跨平台开发做准备. ...
- Shiro登录成功之后跳到指定URL
通常我们使用shiro,登录之后就会跳到我们上一次访问的URL,如果我们是直接访问登录页面的话,shiro就会根据我们配置的successUrl去重定向,如果我们没有配置successUrl的话,那么 ...
- SpringBoot整合SpringSecurity,SESSION 并发管理,同账号只允许登录一次
重写了UsernamePasswordAuthenticationFilter,里面继承AbstractAuthenticationProcessingFilter,这个类里面的session认证策略 ...