精华内容
下载资源
问答
  • opacity与rgba的区别

    2020-10-27 14:52:24
    nth-child(1){opacity: 1} .opacity li:nth-child(2){opacity: 0.8} .opacity li:nth-child(3){opacity: 0.6} .opacity li:nth-child(4){opacity: 0.4} .opacity li:nth-child(5){opacity: 0.2} .rgba li:...

    由图片所示,可清楚的看出rgba 与opacity的区别

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>伪类选择器</title>
    	<style type="text/css">
    		.content{
    			clear: both;
    		}
    		.content li{
    			list-style: none;
    			float: left;
    			margin: 10px;
    			background-color: red;
    			width: 30px;
    			height: 30px;
    			text-align: center;
    		}
    		.opacity li:nth-child(1){opacity: 1}
    		.opacity li:nth-child(2){opacity: 0.8}
    		.opacity li:nth-child(3){opacity: 0.6}
    		.opacity li:nth-child(4){opacity: 0.4}
    		.opacity li:nth-child(5){opacity: 0.2}
    
    		.rgba li:nth-child(1){background-color: rgba(255,0,0,1)}
    		.rgba li:nth-child(2){background-color: rgba(255,0,0,0.8)}
    		.rgba li:nth-child(3){background-color: rgba(255,0,0,0.6)}
    		.rgba li:nth-child(4){background-color: rgba(255,0,0,0.4)}
    		.rgba li:nth-child(5){background-color: rgba(255,0,0,0.2)}
    	</style>
    </head>
    <body>
    	<div class="content opacity">
    		<ul>
    			<li>1</li>
    			<li>0.8</li>
    			<li>0.6</li>
    			<li>0.4</li>
    			<li>0.2</li>
    		</ul>
    	</div>
    	<div class="content rgba">
    		<ul>
    			<li>1</li>
    			<li>0.8</li>
    			<li>0.6</li>
    			<li>0.4</li>
    			<li>0.2</li>
    		</ul>
    	</div>
    </body>
    </html>
    
    展开全文
  • opacity会继承父元素 opacity 属性,而RGBA设置元素后代元素不会继承不透明属性 background: rgba(255,255,255,0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,...

    opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性


    background: rgba(255,255,255,0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff)(兼容ie8)
    

    这个颜色“#19ffffff”是由两部分组成的。

    第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值

    展开全文
  • opacity rgba 问题

    2017-12-09 21:39:51
    opacity rgba 区别

    CSS不透明度的主要问题是,除了对背景生效之外,应用它的元素的内容也会继承它。


    opacity:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#box{
    			width: 100px;
    			height: 100px;
    			background-color: #000;
    			opacity: 0.5;
    		}
    		p{
    			color: #fff;
    		}
    	</style>
    </head>
    <body>
    	<div id="box">
    		<p>this is a text</p>
    	</div>
    </body>
    </html>

    产生的效果:

    可以从图中看出,p标签里面的文字颜色透明度也在变化


    rgba():

    #box{
    			width: 100px;
    			height: 100px;
    			background-color: rgba(0, 0, 0, 0.5);
    		}
    		p{
    			color: #0000ff;
    		}

    效果:


    总结:用opacity时,应用它的元素也会使用它,解决的方法就是在父元素的background-color应用rgba()

    展开全文
  • opacity与rgba透明区别

    2019-05-19 21:07:00
     opacity:作用于当前元素以及元素内所有内容  rgba:仅作用于当前元素颜色或背景(子元素不会继承透明) 2. 隐藏  display: none; 隐藏不占位置  visibility: hidden; 隐藏仍占原来位置 2. 权重(css...

    1. 透明度

      opacity:作用于当前元素以及元素内的所有内容

      rgba:仅作用于当前元素的颜色或背景(子元素不会继承透明)

    2. 隐藏

      display: none; 隐藏不占位置

      visibility: hidden; 隐藏仍占原来位置

    2. 权重(css样式优先级)优先级相同则显示后者

      内联样式:1,0,0,0

      id:0,1,0,0

      class/伪类/属性选择器:0,0,1,0

      标签/伪元素:0,0,0,1

      通配符:0,0,0,0

    3. 清除浮动

      方法一:为父元素设置height

      方法二:添加空标签设置:clear:both

      方法三:后伪元素清除

        .clearfix:after{

          content: '';

          display:block;

          height:0;

          visibility:hidden;

          clear:both;

         }

         .clearfix{

           zoom:1;

          }

      方法四:双伪元素清除

        .clearfix:before, .clearfix:after{

          content: '';

          display: block;

          clear:both;

        }

        .clearfix{

          zoom: 1;

        }

    4. 盒模型

      盒模型:内容,内边距,外边距,边框

      两种:IE盒模型,标准的W3C盒模型

      W3C:content = width

      IE:border+padding+content = width(即内容包含border+padding)

    web API

    1. px、em、rem

      px:像素,绝对单位

      em:相对单位,会继承父元素

      rem:相对单位,相对根元素HTML

    2. zepto

      zepto是一个比jQuery轻量级的库主要用在移动端,jQuery有对应移动端框架jQuerymobile

    3. touch判断手势方向

      开始touchstart触发是,获取手指startX和startY坐标

      触发touchmove时,获取moveEndX和moveEndY坐标

      touchmove最后一次坐标减去touchstart坐标,x正数右滑;x负数左滑;y正数下滑;y负数上滑

    ajax

    1. ajax:主要用来实现客户端与服务器的异步通信,实现页面局部刷新

    2. ajax工作原理

      通过XMLHttpRequest对象向服务器发送异步请求,获取数据

      XMLHttpRequest是ajax的核心,是一种异步请求的技术。简单说就是JavaScript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新效果。

    2. 同步与异步

      同步:阻塞的,浏览器向服务器请求数据,服务器比较忙,浏览器就会一直等着,知道 服务器返回数据。

      异步:非阻塞,浏览器向服务器请求数据,服务器比较忙,浏览器可以干原来的事情,服务器返回数据时浏览器再将数据渲染到页面,局部更新。

    3. http状态码

      100→正在初始化  101→正在切换协议

      200或以2开头的→响应体已经成功返回  202→接受

      301→永久重定向  302→临时重定向  304→本次获取内容是缓存中数据,会每次去服务器校验

      400→参数出现错误  401→未认证,没有登录网站  403→禁止访问没有权限  404→访问地址不存在

      500→服务器错误  503→服务器超负荷

    4. H5+C3

      css3新特性:

        圆角(border-radius)  阴影(box-shadow)

        文字特效(text-shadown)  线性渐变(gradient)  旋转(transform)

        transform: rotate(1deg) scale(0.3,0.2) translate(0px,30px) skew(-9deg,0deg)旋转,缩放,定位,倾斜

        媒体查询,css选择器

      H5新特性:

        拖拽释放(drag,drop)API  语义化标签  音频视频  画布(canvas)  地理(geolocation)  本地离线存储  表单控件(calendar,date,time,url,search)

    5. localStorage,cookies,

      cookies:服务器和客户端都可以访问,大小4KB,有有效期,过期后会删除

      localStorage:永久存储,除非手动清除,负责用不过期

      sessionStorage:不是一种持久化存储,仅仅是会话级别存储

    node

    1. ES6新特性 

      类,模块化,箭头函数,let/const作用域,字符串模板,结构赋值,promise

        

    转载于:https://www.cnblogs.com/xhrr/p/10890811.html

    展开全文
  • opacity 与rgba区别

    2018-02-02 14:13:00
     rgba(r,g,b,a) r,g,b分别是颜色r g b值(0-255),a表示透明度(0-1)。 opacity: value;  opacity: value; value是具体数值,0-1之间 。0:完全透明, 1:完全不透明 本以为二者可以互相替换实现效果...
  • 但是这种透明度与RGBA 及HSLA 有所不同,这种方式设置透明度会对整个元素产生影响(元素内容都会透明)。反之,使用HSLA或RGBA 则可以仅让元素某些部分有透明效果。这样,一个元素可以带有HSLA 透明...
  • opacity与rgba

    2016-03-11 00:29:00
    opacity与rgba的区别 实现半透明有两种方式:(1)background-color:rgb(0,0,0);opacity:.2;(2)background:rgba(0,0,0,.2); 这两种方式是不同的。opacity方式,会将元素的子元素也变成半透明的,例如:文字...
  • 首先这两个都透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) r为红色值, 正整数 | 百分数 g为绿色值,...
  • CSS:透明度 opacity与rgba()的区别

    千次阅读 2015-10-22 17:23:53
    在对元素进行透明度设置时,经常用到opacity与background-color:rgba()。那么,它们到底有啥区别呢? 在使用opacity时,处了对背景生效之外,应用它元素内容也会继承它。下面,对提示框进行一个透明度...
  • 理论 opacity opacity:x,css3中有opacity设定透明度,其数值在[0,1]范围内,当数值为0时即为全...opacity在设定上会适用于整个元素,也就是说它不仅仅对自己生效,还会影响其子元素透明度(不管其子元素透明度多少
  • rgba与opacity的区别

    2021-02-22 23:07:04
    rgba是一种颜色,opacity则影响的是元素的透明度,虽然rgba的那个a也是透明度,但那是改变颜色透明度,也就是rgba整个就是一个颜色 而div的bakcgrond默认是rgba的a是0的,也就是默认透明色,当你随便给一个颜色的时候就会...
  • 两者的区别在于opacity会继承父元素的opacity属性,而rgba设置的元素,其后代元素不会继承父元素的不透明属性。 opacity 语法:opacity: value | inherit value取值为0~1,0为完全透明,1为完全不透明;...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rgba与opacity/filter的区别</title> <style> *{ margi...
  • 显示隐藏 opacity:0;隐藏visibility:hidden;效果一致,还有rgaba() 只是单纯地设置了dom元素css样式,好比给一个人化妆 display:none;...慢慢地它写法也可以写成rgba(KaTeX parse error: Expe
  • 两者的区别 如标题所示,今天我们谈谈rgbaopacity有什么区别? 这次我又来做一次搬运工了,哈哈(●’◡’●) RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间。 R:红色值。正整数 | ...
  • rgba()与opacity的区别

    2015-12-01 16:46:00
    我们都知道在设置透明度时候 ,IE低版本时,是不支持opacity的 ,只支持filter。所以一般在设置透明度时,我们会写上 .opacity4 { opacity: 0.4; filter:alpha(opaity=40); } 但是其实rgba()也可以...
  • rgbaopacity 的区别: 两者都可以设置透明度 rgba(red,green,blue,transparent); opacity:0~1 0代表全透明,1代表不透明 rgba只让当前颜色透明;而opacity可以让元素包括元素内部所有颜色相关的都透明 ...
  • rgb 、rgbaopacity

    2018-10-10 17:04:00
    Rgb()颜色的表示方法值是0-255如background:rgb(12,15,16); Opacity表示透明度 值是0-1; Rgba() r是red 0-255 g是green 值是0-...rgb和opacity与rgba的区别: 前者的内容会变透明,后者不会变透明,内容包...

空空如也

空空如也

1 2 3
收藏数 56
精华内容 22
关键字:

opacity与rgba的区别