教你玩转CSS 图像透明/不透明

图像的透明度 - 悬停效果

透明的盒子中的文字

使用CSS很容易创建透明的图像。

注意：CSS Opacity属性是W3C的CSS3建议的一部分。

    img{opacity:0.4;filter:alpha(opacity=40); /*  IE8 及其更早版本 */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* IE8 及其更早版本 */}

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

图像的透明度 - 悬停效果

教你玩转CSS 图像透明/不透明相关推荐

教你玩转CSS margin(外边距)
目录 margin 可能的值 Margin - 单边外边距属性 Margin - 简写属性所有的CSS边距属性 margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色, ...
教你玩转CSS 属性选择器
目录具有特定属性的HTML元素样式属性选择器属性和值选择器属性和值的选择器 - 多值表单样式 CSS 属性选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是cl ...
教你玩转CSS 媒体类型
目录 CSS 媒体类型媒体类型 @media 规则其他媒体类型 CSS 媒体类型媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体 ...
教你玩转CSS 精灵图/雪碧图
目录精灵图/雪碧图图像拼合 - 简单实例图像拼合 - 创建一个导航列表图像拼合s - 悬停效果精灵图/雪碧图精灵图/雪碧图就是图像拼合也就是单个图像的集合. 有许多图像的网页可能需要很长 ...
教你玩转CSS响应式设计
目录什么是 Viewport? 设置 Viewport CSS 网格视图什么是网格视图? 响应式网格视图 CSS 媒体查询添加断点
教你玩转CSS 提示工具(Tooltip)
如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移动到指定元素后触发基础提示框(Tooltip) 提示框在鼠标移动到指定元素上显示: <style>/* Tooltip ...
教你玩转CSS 下拉菜单
目录基本下拉菜单实例解析下拉菜单下拉内容对齐方式使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 基本下拉菜单当鼠标移动到指定元素上时,会出现下拉菜单. <style> ...
教你玩转CSS 导航栏
目录 CSS 导航栏导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框
教你玩转CSS 伪元素
目录 CSS 伪元素语法 :first-line 伪元素 :first-letter 伪元素伪元素和CSS类多个伪元素 CSS - :before 伪元素

教你玩转CSS 图像透明/不透明

图像的透明度 - 悬停效果

教你玩转CSS 图像透明/不透明相关推荐

最新文章

热门文章