php 将颜色透明度,css中如何使颜色透明度

css中使颜色透明度的方法:首先创建一个HTML示例文件;然后创建一个div;最后通过“opacity:0.5;”属性设置元素背景的透明度即可。

faaede2373bb2054d5ed4d9a07e86678.png

本教程操作环境:windows7系统、css3、thinkpad t480电脑。

CSS颜色透明度

一、设置元素背景透明度

opacity可以用来设置元素背景的透明度;它需要0~1之间的值

0表示完全透明(opacity:0);

1表示完全不透明(opacity:1);

0.5表示半透明(opacity:0.5);

代码演示:

opactity

.box1{

position:relative;

width:200px;height:200px;

background-color: #00f;

}

.box2{

position:absolute;

top:80px;

left:80px;

width:200px;

height:200px;

background-color:#0f0;

}

.box3{

position:relative;

width:200px;

height:200px;

background-color:#f00;

z-index:1;

}

对比一下元素在设置同名之前的表现效果:

585c623c76d3c46c3f10534f9b162f47.png

设置透明度的效果.box1{

position:relative;

width:200px;height:200px;

background-color: #00f;

z-index:10;

opacity:0.5;

}

.box2{

position:absolute;

top:80px;

left:80px;

width:200px;

height:200px;

background-color:#0f0;

z-index:5;

opacity:0.5;

}

.box3{

position:relative;

width:200px;

height:200px;

background-color:#f00;

z-index:1;

opacity:0.5;

}

表现效果:

ed9cb97d0fd63bec45bca2604842d0c5.png

二、浏览器兼容性问题:

2055c599acc278f007ad6719550705a8.png

opacity属性在IE8及其以下的浏览器中不支持

0398fc220a1f606777ed922bee8126fd.png

为了实现透明效果,IE8及其以下的浏览器需要使用如下标签代替:

alpha(opacity=透明度)

透明度选择一个0~100之间的值

0表示完全透明(filter:alpha(opacity=0);)

100表示完全不透明(filter:alpha(opacity=100);)

50表示半透明(filter:alpha(opacity=50);)

这种方式支持IE6filter:alpha(opacity=50);

.box1{

position:relative;

width:200px;height:200px;

background-color: #00f;

z-index:10;

opacity:0.5;

filter:alpha(opacity=10);

}

.box2{position:absolute;

top:80px;

left:80px;

width:200px;

height:200px;

background-color:#0f0;

z-index:5;

opacity:0.5;

filter:alpha(opacity=50);}

.box3{

position:relative;

width:200px;

height:200px;

background-color:#f00;

z-index:1;

opacity:0.5;

filter:alpha(opacity=80)}

表现效果:在IE8及其以下的浏览器也可以很好地适应

0fcca261c924ec252c94afc08970eff0.png

因为filter:alpha(opacity=透明度) 这条元素写在下面,所以 filter:alpha(opacity=透明度) 的优先级要高于 opacity:0.5; 的优先级。最终表现效果不是opacity:0.5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/475867.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php框架laravel百科,PHP 的Laravel 框架

在windows下,搭建PHP的Laravel框架很简单.先把PHP的安装目录 加入到环境变量里(在命令行能访问到php -v 就说明可以了)然后 这些是需求的环境PHP> 7.1.3 (不用说了)OpenSSL PHP扩展(用composer安装器可以自动给你配置的,以下同理,如果没配置,可以自行去php.ini里面把扩展前…

LeetCode 332. 重新安排行程(欧拉路径)

1. 题目 给定一个机票的字符串二维数组 [from, to],子数组中的两个成员分别表示飞机出发和降落的机场地点,对该行程进行重新规划排序。 所有这些机票都属于一个从JFK(肯尼迪国际机场)出发的先生,所以该行程必须从 JFK…

seaborn绘图入门1(lineplot+barplot+heatmap+scatterplot)

文章目录1. lineplot 线图2. barplot 、heatmap 条形图、热图2.1 barplot,条形图2.2 heatmap,热图3. scatterplot、regplot 散点图3.1 scatterplot,普通散点图3.2 regplot,带回归线3.3 scatterplot(x,y,hue) ,hue带第三…

matlab系统的初始条件,指定总线信号的初始条件

创建用于初始化的非完全结构体非完全初始条件结构体为总线的部分元素提供初始值。如果您在仿真过程中使用非完全初始条件结构体,Simulink 将创建一个完全的初始条件结构体来表示总线的所有元素。对于非完全初始条件结构体没有显式指定值的每个元素,Simul…

seaborn绘图入门2(distplot+kdeplot+jointplot+set_style)

文章目录4. distplot(a,kdeFalse),直方图5. kdeplot,密度图5.1 kdeplot,一维密度图5.2 jointplot(x,y,kindkde),二维密度图6. set_style(),设置底色learn from https://www.kaggle.com/learn/data-visualization 上一…

帝国cms搜索php分页,帝国cms V7.2自定义分页(列表分页,内容分页)样式步骤

【1】自己修改帝国cms默认的分页样式(css),这样做的好处是你不用去改动帝国的核心文件,方便以后升级。【2】自己动手去修改帝国的分页(phpcss),帝国的分页在e>class>下的t_functions.php这个文件里。列表页模板[!--show.page--]:分页导…

python怎么写方程条件,条件方程曲线拟合

在xmin处多项式的导数0的条件可以表示为一个简单的约束,这意味着变量p2,p3,和{}实际上并不独立。衍生条件是p2 2*p3*xmin 3*p4*xmin**2 0其中xmin是xdata的最小值。此外,xmin将在fit之前知道(如果不一定是在编写脚本时)&#x…

LeetCode 516. 最长回文子序列(动态规划)

1. 题目 给定一个字符串s,找到其中最长的回文子序列。可以假设s的最大长度为1000。 示例 1: 输入: "bbbab" 输出: 4 一个可能的最长回文子序列为 "bbbb"。示例 2: 输入: "cbbd" 输出: 2 一个可能的最长回文子序列为 "bb"…

LeetCode 第 26 场双周赛(363/1971,前18.4%)

文章目录1. 比赛结果2. 题目1. LeetCode 5396. 连续字符 easy2. LeetCode 5397. 最简分数 medium3. LeetCode 5398. 统计二叉树中好节点的数目 medium4. LeetCode 5399. 数位成本和为目标值的最大数字 hard1. 比赛结果 做出来了 1、2、3 题,19分钟做出来3题&#x…

2011年值得注意的5个设计趋势

在过去的12个月里,我们已经看到Web设计领域发生了许多变化。 包括智能手机和平板电脑(如iPad)这些移动设备的日渐普及已经改变了用户对内容的访问和交互方式。还有,像HTML5、web字体和CSS这些新标准的正式通过意味着越来越多的用户可以使用网络上最新最强…

linux内核线程绑定到单个核,linux 将进程或者线程绑定到指定的cpu上

基本概念cpu亲和性(affinity)CPU的亲和性, 就是进程要在指定的 CPU 上尽量长时间地运行而不被迁移到其他处理器,也称为CPU关联性;再简单的点的描述就将指定的进程或线程绑定到相应的cpu上;在多核运行的机器上,每个CPU本…

LeetCode 1453. 圆形靶内的最大飞镖数量(几何题)

1. 题目 墙壁上挂着一个圆形的飞镖靶。现在请你蒙着眼睛向靶上投掷飞镖。 投掷到墙上的飞镖用二维平面上的点坐标数组表示。飞镖靶的半径为 r 。 请返回能够落在 任意 半径为 r 的圆形靶内或靶上的最大飞镖数。 示例 1: 输入:points [[-2,0],[2,0…

Pandas入门1(DataFrame+Series读写/Index+Select+Assign)

文章目录1. Creating, Reading and Writing1.1 DataFrame 数据框架1.2 Series 序列1.3 Reading 读取数据2. Indexing, Selecting, Assigning2.1 类python方式的访问2.2 Pandas特有的访问方式2.2.1 iloc 基于index访问2.2.2 loc 基于label标签访问2.3 set_index() 设置索引列2.4…

关于Visual C#.NET数据库开发经典案例解析(附光盘两张)(珍藏版)—的读后感...

关于Visual C#.NET数据库开发经典案例解析(附光盘两张)(珍藏版)— 评论读后感:里面的内容很经典,很实用读后感:给初学者是好,但是是比较旧的了!VS2003 C/S的读后感&#…

LeetCode 372. 超级次方(快速幂)

1. 题目 你的任务是计算 ab 对 1337 取模,a 是一个正整数,b 是一个非常大的正整数且会以数组形式给出。 示例 1: 输入: a 2, b [3] 输出: 8示例 2: 输入: a 2, b [1,0] 输出: 1024来源:力扣(LeetCode) 链接&…

c#让电脑锁定、注销、关机

代码 usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Drawing;usingSystem.Linq;usingSystem.Text;usingSystem.Windows.Forms;usingMicrosoft.Win32;usingSystem.Runtime.InteropServices;usingSystem.IO;usingSystem…

Pandas入门2(DataFunctions+Maps+groupby+sort_values)

文章目录3. Summary Functions and Maps3.1 Summary Functions 数据总结函数3.1.1 describe()3.1.2 mean(),median(),idxmax(),unique(),value_counts()3.2 Maps 映射3.2.1 map()3.2.2 apply()3.2.3 内置转换方法4. Grouping and …

linux视频在windows播放器,适用于Windows和Linux的免费多媒体播放器SMPlayer 18.6.0发布 - 爱绿豆...

SMPlayer是一个很好的 MPlayer 电影播放程序前端,可以支持大部分的视频和音频文件。它支持音频轨道切换,允许调节亮度、对比度、色调、饱和度、伽玛值,按照倍速、4倍速等多种速度回放,还可以进行音频和字幕延迟调整以同步音频和字…

OA 办公系统 模块设计

--连接主数据库 use Master go --如果数据库simpleoa 存在,则先删除simpleoa。 if exists (select * from sysdatabases where namesimpleoa) drop database simpleoa go--创建simpleoa数据库 create database simpleoa go-- use simpleoa go--创建用户表 create…

通过java理解linux,Java继承的理解

继承:1)概念把多个类中相同的成员给提取出来定义到一个独立的类中。然后让这多个类和该独立的类产生一个关系,这多个类就具备了这些内容。这个关系叫继承。1.1)定义类时,通过“继承”一个现有的类,子类可以具有父类中的所有属性和…