opacity设定图片透明度
实例 1 - 创建透明图像
定义透明效果的 CSS3 属性是 opacity。
首先,我们将展示如何通过 CSS 来创建透明图像。
常规图像:

带有透明度的相同图像:

请看下面的 CSS:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。
另外:鼠标悬停图片改变透明度设置
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}
opacity设定图片透明度的更多相关文章
- Opacity多浏览器透明度兼容处理
用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...
- 解决IE6下png图片透明度不显示的问题
世界上最遥远的距离,不外乎我在搞前端,你却在用旧IE,现在随着XP要退休了,IE6的市场占有率应该也会逐步下滑.不过基于天朝人民的惰性以及企鹅微软的“扎篱笆”活动,做网站的朋友依旧不能忽视IE6的存在 ...
- CSS 之 Opacity多浏览器透明度兼容处理
用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...
- Opacity多浏览器透明度兼容处理(转)
用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...
- CSS鼠标点击式变化图片透明度
今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...
- TCPDF 背景图片透明度
1.TCPDF 背景图片透明度 参考:https://bbs.csdn.net/topics/392364981 效果: 2.画一条线: 2.1方法解说 /*画一条线: x1:线条起点x坐标 y1 ...
- 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- IE8下jQuery改变png图片透明度时出现的黑边问题
png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以 ...
- iOS开发-UISlider改变图片透明度
拖动条是通过滑块的位置来标识数值,而且拖动条允许用户拖动滑块来改变值.因此,拖动条通常用于对系统的某种数值进行调节,如调节亮度,透明度,音量等. 一.属性介绍 @property(nonatomic) ...
随机推荐
- golang基础--类型与变量
基础知识--类型与变量 基本类型 布尔型:bool 长度: 1字节 取值范围: false, true 注意事项: 不可以使用数字代表,不像 python中可是使用 1和0表示 整型: int/uin ...
- ubuntu16.04下Hyperledger之搭建Fabric环境简单操作(五步启动e2e_cli)
如果你已经安装好go等工具.git及checkout相关代及下载相关镜像,您只需下面5步就能up e2e_cli~/go/src/github.com/hyperledger/fabric$ sudo ...
- Nuxeo 认证绕过和RCE漏洞分析(CVE-2018-16341)
简介 Nuxeo Platform是一款跨平台开源的企业级内容管理系统(CMS).nuxeo-jsf-ui组件处理facelet模板不当,当访问的facelet模板不存在时,相关的文件名会输出到错误页 ...
- UI Recorder 功能详解
前言: UI Recorder安装教程见:UI Recorder 安装教程(一).UI Recorder 安装教程(二) 本次着重介绍UI Recorder录制过程中的功能按钮:添加悬停,添加断言,使 ...
- PAT题解-1118. Birds in Forest (25)-(并查集模板题)
如题... #include <iostream> #include <cstdio> #include <algorithm> #include <stri ...
- VMware10 安装centos6.7 设置NAT模式固定ip
https://www.cnblogs.com/yychnbt/p/5173761.html
- C# 词频统计 东北师范大学 软件项目管理 第一次作业
一.作为杨老师的学生第一次听杨老师讲课,印象最深的就是:工程中所有步骤之间是乘法,如果任何一步为0,工程就做不出来了.以前所有老师讲到的都是不要太在乎结果,努力的过程很重要,但是这在软件工程中不合适了 ...
- 使用maven的插件进行maven项目的打包
1 maven项目打包的插件有3种 maven-jar-plugin maven-assembly-plugin maven-shade-plugin 2 maven-jar-plugin 现在要新增 ...
- 为elasticSearch开发c++接口
一. ElasticSearch是什么 ElasticSearch是目前开源全文搜索引擎的首选,可以快速存储,搜索和分析海量数据.Stack Overflow,Github等都在使用. Elas ...
- Java关于Robot类的使用
利用Robot类实现自动操作,实现效果是运行之后鼠标自动定位到整个屏幕坐标系的(635,454)位置,输入wangtianze package com.wtz.util; import java.aw ...