css如何利用transparent属性设置透明度?transparent属性绘制各种三角形
想到用css设置元素透明度,大家的第一反应会是:用Opacity属性来设置透明度,其实在css中还有其他设置透明度的方法。本章给大家介绍用transparent属性设置透明度,以及用transparent属性绘制各种三角形。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
那么,大家是不是会问css transparent属性是什么,有什么用?
其实,css transparent是一种全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值;是用来指定全透明色彩的。
打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)
举个例子:
我们在css中定义:background:transparent,意思就代表设置背景为透明。
但,实际上background默认的颜色就是透明的属性,所以写和不写都是一样的。那么为什么有时候需要设置background为transparent?transparent一般会使用在什么场景下:
当果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent
transparent属性在不同css版本下的使用:
在css1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。
在css2中,border-color也开始接受transparent作为参数值,《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
在css3中,transparent被延伸到任何一个有color值的属性上。
我们来看看兼容性:
#1:border-color 不接受该值;
#2:color 不接受该值;
transparent属性绘制各种三角形(与border属性一起使用)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.demo {margin: 40px auto;width:800px;/*background-color: #f0ac6b;*/}.demo *{float: left;margin: 20px 30px;width: 0px;height: 0px;}.t1 {/*background-color: #f0ac6b;*/border-bottom: 40px solid red;border-right: 20px solid transparent;border-left: 20px solid transparent;}.t2 {/*background-color: #f0ac6b;*/border-bottom: 40px solid transparent;border-right: 40px solid red;/*border-left: 20px solid transparent;*/}.t3 {border-top: 40px solid red;border-right: 20px solid transparent;border-left: 20px solid transparent;}.t4 {border-top: 40px solid transparent;border-left: 40px solid red;}.t5 {border-top: 40px solid red;border-right: 40px solid transparent;}.t6 {border-left: 40px solid transparent;border-bottom: 40px solid red;}.t7 {border-left: 40px solid red;border-bottom: 20px solid transparent;border-top: 20px solid transparent;}.t8 {border-right: 40px solid red;border-bottom: 20px solid transparent;border-top: 20px solid transparent;}</style></head><body><div class="demo"><div class="t1"></div><div class="t3"></div><div class="t2"></div><div class="t4"></div><div class="t5"></div><div class="t6"></div><div class="t7"></div><div class="t8"></div></div></body></html>
效果图:
总结:以上就是transparent属性的介绍和一个使用transparent属性的例子。例子很简单,大家可以动手试试。
以上就是css如何利用transparent属性设置透明度?transparent属性绘制各种三角形(代码实例)的详细内容,更多请关注我!!!
css如何利用transparent属性设置透明度?transparent属性绘制各种三角形相关推荐
- html设置表单透明度,css利用transparent属性设置透明度的方法
css利用transparent属性设置透明度的方法 发布时间:2020-09-14 13:44:46 来源:亿速云 阅读:188 作者:小新 这篇文章主要介绍css利用transparent属性设置 ...
- (一)QCustomPlot常见属性设置、多曲线绘制、动态曲线绘制、生成游标、矩形放大等功能实现
系列文章目录 提示:这里是该系列文章的所有文章的目录 第一章: (一)QCustomPlot常见属性设置.多曲线绘制.动态曲线绘制.生成游标.矩形放大等功能实现 第二章: (二)QCustomPlot ...
- html中如果设置颜色为半透明状态,css如何利用transparent属性设置透明度?
那么,大家是不是会问csstransparent属性是什么,有什么用? 其实,csstransparent是一种全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值:是用来指 ...
- TCP协议属性设置之SO_REUSEADDR属性
此属性用于设置某个端口是否允许重用.这个属性的用处在那里呢?当我们编写程序时监听了一个端口,但是由于某种情况,服务器程序关闭或者一场退出.造成本地端口出现TIME_WAIT状态时.这是当我们继续监听此 ...
- PyQt(Python+Qt)学习随笔:Designer中属性设置界面的属性字体使用粗黑体的含义
老猿Python博文目录 老猿Python博客地址 使用了好几个月的Designer,今天才发现属性编辑界面的属性名有的为粗而黑,有的则不是,如图: 稍微测试了一下,发现是对属性值进行过调整,不再是缺 ...
- html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下 指定颜色 黑色是Canvas绘制的默认色彩,要想换一种颜色的 ...
- TCP协议属性设置之SO_LINGER属性
此设置说明是否对于套接字调用closesocket函数以后是否进行延迟.如果设置此属性并且设置延迟时间不为0时.则我们调用closesocket函数时,系统会等到剩余数据发送完毕后或者超过设定时间后则 ...
- matlab数据游标属性设置,将节点属性添加到图论图数据提示
绘制具有数据提示的 GraphPlot 对象 创建随机有向图的 GraphPlot 图对象.将额外的节点属性 wifi 添加到该图. rng default G = digraph(sprandn(2 ...
- TCP协议相关属性设置之SO_DONTLINGER属性
对于有些协议来说支持套接字的"安全"关闭.当套接字关闭时,为了不造成尚未传输完毕的数据的丢失,所以会经历TIME_WAIT状态.在这段时间之内客户端调用connect函数进行连接时 ...
最新文章
- docker process tree
- CodeForces - 1350C Orac and LCM(数论)
- csp怎么给线条描边_PS的四种“描边”方式你都知道吗?Photoshop小知识
- go 单元测试 testing 打印输出_2020,你需掌握go 单元测试进阶篇
- 暑期训练日志----2018.8.14
- python多线程调度_python并发编程之进程、线程、协程的调度原理(六)
- 机器/深度学习常见面试问题
- 首批6款5G旗舰手机开卖 最低售价过万!全家桶套餐更酸爽...
- oracle进入rman报错,Oracle学习系列之Rman学习(三)
- vue2.0 之事件处理器
- hsql mybatis 表不存在_Mybatis-plus 查询数据库表时抛异常提示数据库表不存在
- BitviseSSH绕过4A内网直连服务器
- 基本共射放大电路概念详解
- CrossAir CA-C03 2.4G贴片天线使用步骤
- php让浏览器全屏,H5实现浏览器全屏API(全屏进入和全屏退出)
- jadx反编译—下载和使用(傻瓜教程,非常详细)
- Python编程基础与应用(陈波著)微实践
- django-连接Oracle数据库
- Linux操作系统之—所有端口详解大全手册
- Hadoop | Stom