css 的 opacity 属性

最新推荐文章于 2023-04-06 10:16:08 发布
最新推荐文章于 2023-04-06 10:16:08 发布
阅读量6.3k 收藏 7
点赞数
分类专栏： front
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012745499/article/details/117913406
版权

opacity 用于指定元素透明度, 支持 0~1 之间的小数.
默认值 1-完全不透明, 0-完全透明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>opacity</title>

  <style>

    /*
      opacity
        默认 1, 完全不透明
        0 完全透明
     */

    .box1 {
      width: 100px;
      height: 100px;
      background-color: #FF9500;
      position: fixed;
      z-index: 11;
      /*半透明*/
      opacity: .5;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: #0f88eb;
      position: fixed;
      left: 33px;
      top: 33px;
      z-index: 9;
      opacity: .5;
    }
    .box3 {
      width: 100px;
      height: 100px;
      background-color: #A1D8AD;
      position: fixed;
      left: 66px;
      top: 66px;
      z-index: 8;
      opacity: .5;
    }


  </style>
</head>
<body>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

</body>
</html>

opacity

艾斯比的日常
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css opacity属性_CSS中的opacity属性
cumubi7552的博客
07-28 2264
css opacity属性 CSS | 不透明度属性 (CSS | opacity Property) With the growing need of making websites, the need for styling them has also increased. Therefore, CSS has become an indispensable part of creating ...
CSS3中的opacity属性使用教程
09-25
主要介绍了CSS3中的opacity属性使用教程,主要用来设置透明效果,需要的朋友可以参考下
CSS opacity - 实现图片半透明效果的代码
10-30
CSS opacity - 实现图片半透明效果的代码
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
热门推荐
freshlover的专栏
12-05 14万+
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。 首
css两种设置透明度的方法
weixin_64202598的博客
11-18 3599
【代码】两种设置透明度的方法。
CSS3 透明度属性--opacity
si_yf的博客
04-06 549
CSS3属性--opacity的使用
CSS 透明度设置方法及常见问题解析
sleepwalker_1992的专栏
06-19 2242
怎样在CSS样式中设置背景的透明度看看下面的CSS： img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。IE8和早期版本使用滤镜：...
CSS3 opacity 属性
qq_44158936的博客
03-20 1万+
设置 div 元素的不透明级别 1、属性 opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。 当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。 2、语法 op...
HTML5学习笔记（四）
sinat_37138973的博客
11-25 1193
在CSS3中，增加了大量定义颜色方面样式的属性，主要包括以下3种。▶ opacity透明度▶ RGBA颜色▶ CSS3渐变。
挑战CSS难点：解决子元素继承父元素opacity属性的技巧
Shids_的博客
07-15 3327
挑战CSS难点：解决子元素继承父元素opacity属性的技巧
opacity(透明度)属性设置
qq_34171965的博客
12-04 107
1、opacity:是属性，整个元素包含子元素全部都会透明，取值范围0-1; 2、background-color：rgba(0,0,0，.5)rgba是值，用于背景，取值范围0-1。 补充：a-alpha=透明度通道 实例： 1 div{ 2 width: 200px; 3 height: 200px; 4 border: 1px solid red; 5 background-color...
详解CSS3的opacity属性设置透明效果的用法
01-21
CSS3 opacity 属性的功能是用来控制网页元素的透明效果（调整不透明度），早期网页设计常常会用到许多的透明效果，通常都是透过 png 图层来制作透明的感觉，现在网页设计师可以使用 CSS3 opacity 属性来轻松的达到...
解决CSS3的opacity属性带来的层叠顺序问题
09-24
主要介绍了解决CSS3的opacity属性带来的层叠顺序问题的方法,主要针对opacity的属性值小于1的层会覆盖在其他层之上的问题,需要的朋友可以参考下
浏览器 f12 的 console 功能简介
艾斯比
04-27 4704
在做前端开发时, chrome 浏览器的 f12 功能非常好用, 可以调试 html js css 代码 其中 console 标签页表示控制台, 我们可以输入 js 代码, 回车执行 常用的命令有 console.log 打印日志 console.count 计数器, 记录执行的次数 console.time 计时, console.timeEnd 停止计时并打印 $() 表示使用选择器获取单个元素, $$() 表示使用选择器获取元素数组 // 打印 log info debug warn erro
js 如何获取对象的动态属性
艾斯比
05-11 3920
js 有两种方式获取对象的属性 点语法, 例如 person.name 中括号语法, 例如 person ['name'] 其中, 第一种不能使用变量, 而第二种可以使用变量 let person = { name: 'wj', age: 20 } // 点表示法 // 这里不能使用变量作为对象的属性名 console.log(person.name); // 中括号表示法 // 这里可以传入变量作为对象的属性名 let name = 'name';
js 绑定事件的 3 种方式
艾斯比
04-20 3859
js 作为脚本语言, 可以为页面上的元素绑定事件, 有 3 种方式 在 html 中, 声明 onclick 属性, 值为函数调用, 不推荐, html 和 js 耦合, 不利于维护 在 js 中, 对元素赋值 onclick 属性, 值为函数声明, 不推荐, 只能赋值一个回调函数, 多次赋值, 之前的会失效 在 js 中, 为元素添加 addEventListener, 推荐做法, 可以为一个事件类型绑定多个回调函数 <html> <button onclick="triggerC
js 的 slice 和 splice
艾斯比
05-26 3816
js 的 slice 和 splice 都是数组的方法 slice 不改变原数组 splice 改变原数组 let arr = [1, 2, 3, 4, 5] // slice(start?: number, end?: number): T[]; // start 和 end 表示索引 // slice(start[, end]) [start, end) 左闭右开区间 // 返回值是新的数组, 注意原数组不变 console.log(arr.slice(1, 4)); // spli
js 如何优雅赋值默认值
艾斯比
01-20 3563
我们可以使用 let data = targetValue || defalutValue; 优雅地为变量赋值默认值 let data = { name: '你好鸭' } // 短路或 // 当 data.name 不为 null '' 0, 则表示 false, 那么会返回第二个值. 否则返回 data.name let name = data.name || '默认名字' console.log(name); // 赋值 data.name = null; // data.name 为 null,
css opacity属性
最新发布
12-13
CSS3 opacity属性用于控制网页元素的透明效果，可以调整元素的不透明度。它的取值范围是0到1，其中0表示完全透明，1表示完全不透明。默认情况下，opacity属性的值为1，即完全不透明。如果需要将元素设置为半透明，可以将opacity属性的值设置为0.5或其他小于1的值。此外，inherit值可以用于让元素从其父元素继承opacity属性的值。 以下是一个例子，将一个div元素的opacity属性设置为0.5，使其半透明： ```css div { opacity: 0.5; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值