CSS创建透明图像

CSS 图像透明/不透明

CSS Opacity属性是W3C的CSS3建议的一部分。
创建透明图像 - 悬停效果创建一个透明图像
CSS3中属性的透明度是 opacity。
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
IE9,Firefox,Chrome,Opera,和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。
IE8和早期版本使用滤镜:alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值,使得元素更加透明。

图像的透明度 - 悬停效果
CSS样式:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图像透明</title>
    <style>
        div{
            width: 182px;
            height: 141px;
            margin: 300px auto;

        }
        div img{
            opacity: 0.7;
            filter: alpha(opacity=70);
        }

        div img:hover{
            opacity: 1;
            filter: alpha(opacity=100);
        }
    </style>
</head>
<body>
    <div>
        <img src="beauty.jpg" alt="美女"/>
    </div>
</body>
</html>

  

时间: 2024-10-11 17:00:01

CSS创建透明图像的相关文章

CSS创建三角形(小三角)的几种方法

你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并制作一个三角形,在本文中,我将介绍: 点此查看实例展示 编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个BASE64字符串是最好的解决方案. 有用的工具(用于图片转换成BASE64编码): http://webcodertools.com/imagetobase

Unity 游戏开发技巧集锦之创建透明的材质

Unity 游戏开发技巧集锦之创建透明的材质 Unity创建透明的材质 生活中不乏透明或者半透明的事物.例如,擦的十分干净的玻璃,看起来就是透明的:一些塑料卡片,看起来就是半透明的,如图3-23所示.在Unity中,可以创建模拟了透明效果的材质,这也是本节主要讲解的内容. 图3-23  半透明的卡片 Unity创建并配置材质 在Project视图里,创建一个材质,并命名为TransMaterial,选中它然后在Inspector视图里修改Shader属性为Transparent/Diffuse,

Unity3D ShaderLab 使用alpha参数创建透明效果

Unity3D ShaderLab 使用alpha参数创建透明效果 其实Unity为了方便我们的工作,为我们内置了很多参数.比如马上用到的透明功能. 准备场景新建Shader Material ,一张红绿蓝的贴图. 实现代码及其简单,直接看完成的: Shader "91YGame/AlphaTransparency" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _TransVal

任意两张带透明图像的一种形状过渡效果

一直想要一个Flash 那种形状渐变效果,这两天苦思冥想了一番实现了,先看效果. 一开始是往把贴图alpha通道识别成路径,建模想办法拉顶点的方向去,想来想去不是个好办法,后来还是决定直接基于位图实现,尽量采用gpu可以处理的方式. 然后往这边思考后,脑子里就浮现出了ditance field 这个概念,alpha表达的还是颜色,直接插值alpha会呈现出颜色渐变的结果. 而distance field 反映的是离边的远近,插值他就会呈现出每个像素离边的距离的变化. 确定方案后就是实现了. 我采

AJAX &amp; JavaScript Barcode Generator集成到AJAX Web应用程序创建条形码图像

AJAX & JavaScript Barcode Generator是原生的JavaScript,用于创建条形码图像,它可以很容易地集成到AJAX Web应用程序,Oracle报表和HTML中.因为它是原生的JavaScript ,所以不需要安装任何额外的组件,字体或插件来创建条形码,它还是功能完善的JavaScript条形码生成空控件. 具体功能: 多种条形码类型被一个单个的产品所支持. 多地区兼容性-本产品兼容了所有的语言和地区设置,包括Windows的双字节版本,如用于中国和日本,以及亚

【Unity Shaders】Transparency —— 使用alpha通道创建透明效果

本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源(当然你也可以从官网下载). ========================================== 分割线 ========================================== 写在前面 从这篇开始是一个全新的章节:透明效果(Transparency).之前在制作LOGO闪光效

报表上创建条形码图像的条码控件Native MS Access Barcode Generator

Native MS Access Barcode Generator条形码控件是一个VBA模块,可以方便地嵌入到微软Access数据库中,用于在报表上创建条形码图像.一旦被安装到一个数据库中,创建条形码时就不需要安装其它任何字体或组件:它是一个完整的.与数据库一起使用的条形码生成器,即使当它发布以后也一样. 具体功能: Native Access Barcode Generator产品是为那些希望不依赖任何外部设备,而将条形码功能纳入到数据库和应用程序的Access开发者而准备的.非开发人员和最

巧妙使用CSS创建可以打印的页面

用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <link href="css/admin.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/admin-print.c

关于css背景透明

今天写项目碰到需要css背景透明,文字不透明的例子. 第一个方法: 在这个div设置背景background:rgba(0,0,0,0.2) !important; filter:Alpha(opacity=20); /* 兼容IE6*/ 随后在div里文字设position:absolute; 如图所示, 代码如下: 就可以妥妥的解决了.