<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
.clip_a {
display:block;
width:128px;
height:128px;
}
.clip_a img {
border:0;
position:absolute;
clip:rect(0 128px 128px 0);
}
.clip_a:hover {
border:0;
}
.clip_a:hover img {
margin-top:-128px;
clip:rect(128px 128px 256px 0);
}
.ie6_visible {
display:none;
_display:inline;
}
</style>
</head>
<body>
<div id="main">
<div id="effect" class="part">
<h3>效果：</h3>
<div class="show">
<div class="demo"> <a href="javascript:" class="clip_a"><img id="pngImage" src="http://image.zhangxinxu.com/image/blog/201104/sofa_sprite.png" /></a> </div>
</div>
</div>
</div>
</div>
<script>
var oImage = document.getElementById("pngImage");
oImage.src = "http://www.zhangxinxu.com/study/image/pixel.gif";
oImage.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://image.zhangxinxu.com/image/blog/201104/sofa_sprite.png')";
</script>
</div>
</body>
</html>
分享到：
相关推荐
PNG是一种支持透明度的图形格式，其通过 alpha 通道来表示像素的透明程度，这使得它成为实现窗口透明效果的理想选择。 描述中提到的"网上抄的"可能是指网上的一些代码示例或教程，虽然具体的内容没有提供，但我们...
本文将深入探讨如何使用C#脚本在Unity中实现这一功能，特别是如何处理透明图层，以便得到包含透明度信息的PNG图片。 首先，我们需要了解Unity中的相机（Camera）组件。在Unity中，相机是渲染场景的关键元素，它决定...
Recton V2.5是一款远程控制软件，它允许用户通过网络连接远程操作另一台计算机，实现设备间的跨距离协作和管理。在IT行业中，远程控制技术具有广泛的应用，包括技术支持、远程办公、系统管理等场景。 远程控制软件...
2. `rect()`函数：`clip`属性值是一个`rect(top, right, bottom, left)`函数，参数分别表示元素的上、右、下、左边距，单位通常是像素。通过改变这些值，我们可以实现图片的动态剪裁，从而创建动画效果。 二、CSS3...
本示例代码着重讲解如何利用GDI+在Windows应用程序中加载和显示各种常见的图片格式，如jpg、png和bmp。 首先，为了使用GDI+，你需要包含相关的头文件并链接GDI+库。在源文件中添加以下代码： ```cpp #include #...
总结来说，CSS的`clip`属性通过`rect()`函数提供了一种强大的工具来控制绝对定位元素的可视区域，从而实现特定的布局和设计效果。然而，随着CSS3的发展，开发者现在有更多的选择，如`clip-path`，以实现更为复杂的...
在"pig动画sprite 动画图片两张"中，"pig_1.png"和"pig_0.png"很可能是构成猪动画的两张帧图片。这些图片可能是同一角色在不同动作或状态下的快照，通过在HTML5 Canvas元素上使用EaselJS库，可以设置一个定时器来...
首先，PNG图像是一种基于位图的图像格式，支持24位色彩和8位透明通道（Alpha通道）。Alpha通道用于表示像素的透明度，值为0表示完全透明，255表示完全不透明。因此，每个PNG像素实际上包含四个分量：红、绿、蓝和...
它可以帮助我们轻松地截取、定位和操作图像的特定部分。结合`cv::Mat`对象的不同方法，我们可以根据需求选择合适的方式来截取和处理图像。在实际应用中，理解这些基本操作对于进行复杂的图像处理任务至关重要。
4. **处理透明度**：PNG图片支持透明度，但在MFC中默认不处理Alpha通道。如果需要保持PNG的透明效果，你需要手动处理。这通常涉及到创建一个`CBrush`对象并设置其颜色为透明，然后在绘制前填充画布： ```cpp dc....
定义 一个绝对定位或固定定位元素通过使用属性clip可以改变剪裁区域的形状，但并不改变元素本身的宽高属性 clip 值: rect(top,right,bottom,left) | auto | inherit 初始值: auto 应用于: 绝对定位或固定定位...
本文将详细讲解如何在MFC的按钮控件上同时显示PNG图片和文本，以此来提升应用程序的界面美观度。 首先，我们需要了解PNG图片的特点。PNG是一种无损压缩的图像文件格式，支持透明度，这使得它成为UI设计中的首选格式...
clip的rect属性 ： clip:rect(top,right,bottom,left)四个属性值不可缺少; 这四个属性值到底是如何计算的呢 先看下边这张图 rect的top,right,bottom,left是基于左上角来计算的 来看一个小demo吧 html： XML/...
`Rect`类包含四个属性：`origin.x`和`origin.y`定义了矩形左下角的坐标，`size.width`和`size.height`定义了矩形的宽度和高度。精灵的矩形边界可以通过`getBoundingBox()`方法获取。 碰撞检测的基本步骤如下： 1. ...
1.clip属性必须和定位属性postion一起使用才能生效。 2.clip裁切的计算坐标都是以左上角即（0,0）点开始计算，这点不像padding和margin，它们两个的右边距和下边距是从最右边和最下边开始计算的。 结
在本文中，我们将深入探讨如何使用CSS3的`clip`属性和jQuery库来创建一个响应式的背景图片放大动画效果。这种技术广泛应用于现代网页设计，为用户提供动态且引人入胜的交互体验。 首先，`clip`属性是CSS中用于裁剪...
在Unity游戏引擎中，开发人员经常需要处理各种图像资源，如png、jpg和tga等，将它们转化为Unity可以理解的Texture2D对象。Texture2D是Unity中表示二维纹理的一种数据类型，它包含了图像的颜色信息和元数据，用于渲染...
在VC++6.0开发环境中，创建透明图片和叠加效果是一项...通过这些步骤，你可以创建出具有复杂透明度效果和图片叠加的C++应用程序。对于初学者来说，这个实例是一个很好的起点，它将帮助你进一步掌握Windows图形编程。
此外，对于PNG图片的加载，需要注意的是PNG是一种无损压缩的图像格式，它支持透明度和多种色彩深度。因此，确保MFC的`CImage`正确处理这些特性是很重要的。如果在加载过程中出现颜色失真或透明度丢失，可能是因为...