[HTML]CSS基础教程 透明度+优先级，满满的实用技巧

最新推荐文章于 2023-05-20 20:12:52 发布
最新推荐文章于 2023-05-20 20:12:52 发布
阅读量1k 收藏 1
点赞数 4
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hnspystqxskzlqc/article/details/123839277
版权
这篇博客详细介绍了CSS中的透明度使用，包括opacity、filter: alpha和rgba方法，并探讨了透明度对元素及内容的影响。同时，文章还讲解了CSS优先级概念，特别是z-index的运用。此外，讨论了块元素的隐藏与显示方式，对比了display:none和visibility:hidden的区别。这些基础知识对于网页布局至关重要。
摘要由CSDN通过智能技术生成

目录

一、透明度

二、优先级

三、块元素隐藏与显示

四、总结

(接上一期知识，咱们继续讲解。)

一、透明度

1、 opacity：0-1，值越小越透明

                例：opacity：0,5

2、 兼容IE8以下：0-100

                例：filter：alpha(opacity=30)

3、rgba

                例：background-color：rgba（255,0,0,0.5）

4、transparent：完全透明

                例：background-color：transparent

       注：  1.opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
                2.rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

 

<!DOCTYPE html>
<html>
	<head>
		&
最低0.47元/天 解锁文章
刘先生LSS
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html css表格透明度,【总结】CSS透明度大汇总_html/css_WEB-ITnose
weixin_32059869的博客
06-28 782
近年来，CSS不透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效。这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一...
【黑马前端—CSS基础】背景
学习如逆水行舟，不进则退
08-30 1053
内容来自b站的黑马程序员pink老师 由我收集整理 总结 CSS 的背景 通过 CSS 背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 背景颜色 background-color 属性定义了元素的背景颜色。 background-color:颜色值; 一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色 background-color:transparent; 背景图片 backgro
html中的透明度属性,css中的透明度属性
weixin_42099151的博客
06-09 850
Firefox3.5已不支持私有属性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的，Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性，Firefox升级到3.5之后，一些网站原来有的透明没有了，呵呵。除了IE之外，目前主流浏览器，?Opera 9.0及更高版本，Safari??1.2(...
html如何调节透明度,CSS 如何设置一个元素的透明度呢？
weixin_42462382的博客
06-05 1483
摘要:下文讲述css中设置元素透明度的两种方法分享,如下所示:在html中，有时我们需对图片，文本设置其透明度，那么到底该如何设置呢？下文讲述使用css脚本设置透明度的方法方法1：使用opacoty属性设置其透明度opacity属性其功能为:设置透明度其属性值在0-1之间(0为完全透明,1为完全不透明)方法2：使用RGBA属性设置其透明度RGBA属性值为RGB和A的组合,A用于放入透明度值RGBA...
群组选择器、透明度属性、css选择器的优先级
weixin_69474097的博客
07-20 237
群组选择器、透明度属性、css选择器的优先级
html页面透明度属性,css透明度是什么属性？
weixin_35406812的博客
06-04 3071
css透明度属性指的是opacity属性；opacity属性可以设置一个元素了透明度级别。下面本篇文章就来给大家介绍一下CSS opacity属性，有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css opacity属性用于设置一个元素了透明度级别，从0.0(完全透明)到1.0(完全不透明)。通过该属性我们可以设置图片、文字、盒子模型等等的透明度。语法：opacity: valu...
html+css+js基础问答
qq_43751465的博客
08-26 5194
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
01.HTML和CSS基础知识总结（内附思维导图）
weixin_67140731的博客
04-02 1136
前端HTML和CSS基础知识总结，内附思维导图和开发软件的快捷键
自己学习html+css的详细笔记
qq_53366282的博客
05-18 1798
目录 常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13
3万字干货HTML+CSS入门指南（建议收藏）
李南江
08-01 4664
什么是浏览器 浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已 常见主流浏览器 浏览器市场份额-国内统计 浏览器市场份额-国外统计 不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现 IE内核 Trident 谷歌内核 WebKit / Blink 火狐内核 Gecko Saf
CSS透明度[简述]
weixin_52629592的博客
06-19 1722
CSS中设置透明度有两种方式: GRBA和opacity. 下面我们就这两种方式进行简要介绍:语法如下: rgba只是单纯的设置颜色的透明度,但是标签上的文字不会透明. 即透明元素的子元素不会继承其透明效果.代码示例如下: 运行结果: 我们可以看到,使用grba方法只是颜色发生了变化,两个div的文字都没有改变语法如下: 其中,value的取值为[0~1].opacity属性具有继承性,因此会使得容器中所有的元素都
html中的透明度怎么设置,css透明度怎么设置？css中各种透明度的设置方法总结...
weixin_28695537的博客
06-17 1316
本篇文章给大家介绍一下css中透明度的设置方法，下面我们就来看看具体的内容。不透明度和透明度根据定义，CSS中的不透明度和透明度定义了元素的可见性，无论是图像，表格还是RGBA(红绿蓝alpha)颜色值。根据它们的意思，不透明度是元素不透明度或坚固度的度量，而透明度则衡量您可以轻松地看到它下面层中存在的内容。无论如何，它们以相同的方式工作 - 100％不透明意味着元素完全可见，而100％透明意味着...
解决html透明度继承问题
q577448354的博客
08-09 612
众所周知，css的opactiy属性有继承问题，又有很多人不愿因这一小块代码去浪费资源引用插件： 解决办法： -这个代表代表遮罩层--> 设置他们的父元素  position:relative; .zhe1{ position: absolute; top: 0px; left: 0px; width:100%; //相对于其父元素的100%高度同理
html子级透明度不随父级别,我不想从CSS的父级继承子级不透明度
weixin_42410477的博客
06-15 323
我不想从CSS的父级继承子级的不透明度。我有一个div是父级，而我在第一个div中有另一个div是孩子。我想在父div中设置opacity属性，但我不希望子div继承opacity属性。我怎样才能做到这一点？#1楼就像其他人在此线程和其他类似线程中提到的那样，避免此问题的最佳方法是使用RGBA / HSLA或使用透明的PNG。但是，如果您想要一个荒谬的解决方案，类似于该线程(也是我的网站)的另一个...
html父级透明度,详解CSS-opacity子元素继承父元素透明度的解决方法
weixin_32389427的博客
06-27 843
这篇文章主要介绍了详解CSS-opacity子元素继承父元素透明度的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧在写项目页面的过程中，遇到子元素继承父元素透明度的问题，查找了好多文档给出的都是第一种方法，这种方法主要解决简单场景的，而对于设置复杂的background时，该方法不再适用。分析原因：父元素背景颜色设置透...
css 设置透明背景
热门推荐
weixin_40918145的博客
10-27 1万+
方法一、opacity：0~1，这个方法有个缺点，就是内容也会跟着透明； 方法二、background-color:rgba(0,0,0,0)，前面三个数字是rgb中的三个数字，合起来代表的是颜色，最后一个数字代表的是透明度，他的值是从​​​​0-1的，其中1是代表一点都不透明，0代表的是完全透明，使用这个方法就只会设置div背景透明，而不会影响到div里的内容； 方法三、background-color: transparent; ...
question1（display: block；和display: none；冲突吗）
w296932099的博客
08-01 1138
aaa
【HTML＆CSS】如何设置透明的div盒子？
最新发布
m0_60364956的博客
05-20 9415
有时候我们想把盒子的背景设置成透明的，或者半透明的，看起来更美观。这就需要我们给颜色加一个透明度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值