CSS3中的透明属性opacity的用法实例

实例

设置 div 元素的不透明级别:

div
{
opacity:0.5;
}
完整例子:
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
</style>
</head>
<body>
<div>本元素的不透明度是 0.5。请注意,文本和背景色都受到不透明级别的影响。</div>
</body>
</html>

您可以在本页底部找到更多实例。

浏览器支持

所有浏览器都支持 opacity 属性。

注释:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。

定义和用法

opacity 属性设置元素的不透明级别。

默认值:1
继承性:no
版本:CSS3
JavaScript 语法:object.style.opacity=0.5

语法

opacity: value|inherit;
描述测试
value规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。测试
inherit应该从父元素继承 opacity 属性的值。

亲自试一试 - 实例

<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
// 返回被选选项的文本
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
  {el.style.opacity=opacity;}
else
  {alert("Your browser doesn't support this example!");}
}
</script>
</head>
<body>

<p id="p1">请从下面的例子中选择一个值,以改变此元素的不透明度。</p>
<select οnchange="ChangeOpacity(this);" size="5">
  <option />0
  <option />0.2
  <option />0.5
  <option />0.8
  <option selected="selected" />1
</select>

</body>
</html>


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

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

相关文章

java嵌套类型 无法隐藏外层类型_java内部类深入详解 内部类的分类 特点 定义方式 使用...

java内部类 内部类的分类 特点 定义方式 使用 外部类调用内部类 多层嵌套内部类 内部类访问外部类属性 接口中的内部类 内部类的继承 内部类的覆盖 局部内部类 成员内部类 静态内部类 匿名内部类内部类定义将一个类定义放到另一个类的内部,这就是内部类内部类与组合是完…

java.io.FileNotFoundException: generatorConfig.xml (系统找不到指定的文件。)

在使用MyBatis的逆向工程生成代码时&#xff0c;一直报错java.io.FileNotFoundException: generatorConfig.xml (系统找不到指定的文件。)&#xff0c;如图 文件结构如下&#xff1a; 代码如下&#xff1a; import java.io.File; import java.util.ArrayList; import java.util…

单例设计模式–鸟瞰

几天前&#xff0c;当我回到家乡时&#xff0c;我的一位来自同事的大三学生参加了一家跨国公司的采访&#xff0c;在采访过程中受了重伤。 我的意思是&#xff0c;由于面试小组提出的难题&#xff0c;他无法使面试合格。 当我回到班加罗尔时&#xff0c;他分享了他在技术面试中…

软件实践第一步——自我介绍

031602631&#xff1b;我是超爱美食的苏韫月&#xff1b;我的爱好是品尝所能接触到的所有甜点&#xff08;迟早&#xff01;&#xff09;&#xff1b;我最近新宠&#xff1a;拌面加扁肉&#xff08;京园淳百味&#xff09;&#xff1b;时隔一年我又回归心惊胆颤写博客文的日子。…

CSS3中使用translate() 方法实现元素位置的移动

translate() 方法通过 translate() 方法&#xff0c;元素从其当前位置移动&#xff0c;根据给定的 left&#xff08;x 坐标&#xff09; 和 top&#xff08;y 坐标&#xff09; 位置参数&#xff1a;实例div{transform: translate(50px,100px);-ms-transform: translate(50px,1…

java机器学习库_Amazon Deep Java Library——Java 机器学习工具箱

近年来&#xff0c;人们对机器学习的兴趣稳步增长。具体来说&#xff0c;现在&#xff0c;企业在各种各样的场景中使用机器学习进行图像识别。它在汽车工业、医疗保健、安全、零售、仓库、农场和农业的自动化产品跟踪、食品识别&#xff0c;甚至通过手机摄像头进行实时翻译等方…

阻抗计算

si9000也可以算 一般有点差异&#xff0c;板厂可以微调 加上滤油&#xff0c;实际阻抗会降低2-3欧 影响最大的是层厚 先选择最薄的芯板&#xff0c;注意差分线的阻抗匹配&#xff0c;间距越小&#xff0c;阻抗小&#xff0c; 转载于:https://www.cnblogs.com/IotI/p/8587277.h…

Spring Data Solr教程:动态查询

Solr通常被称为搜索服务器&#xff0c;我们可以在实现全文搜索功能时使用它。 但是&#xff0c;当我们实现从搜索表单获取其输入的搜索功能时&#xff0c;利用Solr的性能通常是明智的。 在这种情况下&#xff0c;执行的搜索查询取决于收到的输入。 这意味着查询参数的数量取决…

[cdq分治][树状数组] Jzoj P4419 hole

Description GFS打算去郊外建所别墅&#xff0c;享受生活&#xff0c;于是他耗费巨资买下了一块风水宝地&#xff0c;但令他震惊的是&#xff0c;一群DSJ对GFS的富贵生活深恶痛绝&#xff0c;决定打洞以搞破坏。现在我们简化一下这个问题&#xff0c;在这片土地上会按顺序发生一…

关于CSS3实现响应式布局的一些概念和术语

响应式布局也被应用到网站前端开发中&#xff0c;在国内这一词想必是非常火吧&#xff0c;那网站为什么要使用响应式布局呢&#xff1f;原因和其他创意性的生活用品基本上是一样的&#xff0c;处于对人力物力财力的节省和对生活富有诗意的一种追求。在人力物力和财力有限的情况…

AjaxSubmit+Servlet表单文件上传和下载

一、背景 前段时间公司要求我做一个上传和下载固件的页面&#xff0c;以备硬件产品在线升级&#xff0c;现在我把这部分功能抽取出来作为一个Demo Project给大家分享。 话不多说&#xff0c;先看项目演示 --> 演示 源码 二、源码 前端 js库&#xff1a;jquery-3.2.1.min.js…

番石榴的EventBus –简单的发布者/订阅者

在查看Google的Guava Libraries 版本10的最新版本时&#xff0c;我注意到EventBus的添加。 这是发布-订阅样式消息传递系统的轻量级实现。 这类似于JMS提供的发布-订阅模型&#xff0c;但是消息保留在应用程序内&#xff0c;而不是在外部广播。 EventBus允许您在程序中创建对象…

apscheduler -定时任务

https://apscheduler.readthedocs.io/en/latest/userguide.html 简单的使用方式为&#xff1a; from apscheduler.schedulers.blocking import BlockingScheduler sched BlockingScheduler()sched.add_job(ff_task,cron,hour0-1,8-23,minute28)sched.add_job(avor_task, cron,…

java迭代器 异常_java迭代器失效 | 学步园

今天在测试代码的时候出现一个异常ConcurrentModificationException&#xff0c;该异常网上很多解决方案以及解释&#xff0c;但我还是再记录一遍吧。代码抽象出来是这样的&#xff1a;import java.util.ArrayList;import java.util.List;public class Test {public static voi…

CSS3中的圆角边框属性详解(border-radius属性)

实例向 div 元素添加圆角边框&#xff1a;div{border:2px solid;border-radius:25px;}页面底部有更多实例。浏览器支持IEFirefoxChromeSafariOperaIE9 、Firefox 4 、Chrome、Safari 5 以及 Opera 支持 border-radius 属性。定义和用法border-radius 属性是一个简写属性&#x…

83.const与类

const常量对象,无法改变数据,只能引用尾部带const方法类的成员如果是const,可以默认初始化,也可以构造的初始化,不可在构造函数内部初始化类中的const成员,无法直接修改,可以间接修改类的成员函数const三种情形:1.返回值const,2.返回常量,3.参数const,可读不可写,尾部const,常量…

使用Apache CXF开发RESTful服务

介绍 如您所知&#xff0c;有两种开发Web服务的方法 简单对象访问协议&#xff08;SOAP&#xff09; 代表性状态转移&#xff08;REST&#xff09; 在继续学习如何使用Apache CXF创建基于REST的Web服务之前&#xff0c;我们将了解什么是REST。 REST不是一项技术&#xff0c;…

CTU 2017 J - Punching Power (二分图匹配)

题意&#xff1a; 公园管理层最终决定在公园的各个战略位置安装一些流行的拳击机。实际上&#xff0c;为了弥补以前缺少的机器&#xff0c;他们决定安装尽可能多的机器。令人惊讶的是&#xff0c;公园不会被新机器堵塞&#xff0c;因为对于机器的位置存在一些非常严重的法律限制…

UI设计师必知:link和@import引用css文件方法的区别

<link>元素所参考的样式用户可以自由的选择加以改变&#xff0c;而导入的样式表单就自动的与剩下的样式表融合在一起了CSS与HTML文档结合的4中方法&#xff1a;1 使用<link>元素链接到外部的样式文件2 在<head>元素中使用"style"元素来指定3 使用C…

javascript mqtt 发布订阅消息

js client使用paho-mqtt&#xff0c;官网地址&#xff1a;http://www.eclipse.org/paho/&#xff0c;参考http://www.eclipse.org/paho/clients/js/官网给出例子Getting Started&#xff0c;写出下面简单的测试代码。 <!DOCTYPE html> <html> <head> <met…