img 半透明 处理img加半透明背景实现思路及代码
发布时间：2013-01-13 16:29:43 作者：佚名 
我要评论
我要评论img加半透明背景实现原理：给li加上背景,li的大小就是图片的大小,在a:hover时候改变a的透明度,感兴趣的朋友可以了解下，希望本文可以帮助到你
复制代码
代码如下:<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>mask-layer</title>
</head>
<style type="text/css">
*{margin:0;padding: 0;}
ul{margin:100px auto 0; width:200px;}
img{border: 0 none;}
li{background-color:#555;list-style: none; width: 146px; height: 220px;}
a:hover{opacity: 0.6;}
</style>
<body>
<ul>
<li><a href=""><img src="http://h.hiphotos.baidu.com/baike/s%3D220/sign=700b0c26462309f7e36faa10420f0c39/64380cd7912397dd9e0581b65982b2b7d0a28707.jpg" alt="" /></a></li>
</ul>
</body>
</html>
原理：给li加上背景,li的大小就是图片的大小,在a:hover时候改变a的透明度
相关文章
- 与普通的蒙版效果不一样，需要有一个空白的地方显示页面上原有的动态内容，具体的实现思路如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-13
- 在某些情况下可能会需要背景半透明文字不透明这样的效果，实现起来并不复杂，通过滤镜便可做到，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-05
- 图片透明在某些特殊的情况下还是比较实用的，下面是用滤镜写的图片透明代码，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-04
背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
本文以背景黑色，透明度0.5举例为大家详细介绍下关于背景透明，文字不透明的最佳方法同时兼容IE，具体实现如下，感兴趣的朋友可以参考下哈希望对大家有所帮助2013-07-03使用滤镜解决IE6下png图片不能透明(被渲染成默认色)的问题
IE6不支持透明，所有的透明部分，都被渲染成灰色或白色（不知道啥颜色，他自己的默认色）。这样看起来难看不说，圆角的功能荡然无存，下面与大家分享下使用滤镜解决此问题2013-06-20格式png24透明底 多种解决png24格式图片在ie6中透明问题
图片透明，锯齿问题是重构人员很头疼的问题，png24可以解决这些锯齿问题，但是ie6不支持png24透明，不过利用ie6的hack问题有两种解决的办法，感兴趣的朋友可以了解下哈2013-05-24- 想不想要自己的主页链接很炫呢，背景半透明的链接效果，空链接实现的链接效果，只需要定义一个特效式的CSS样式即可以实现，在需要实现的地方应用定义的CSS样式，也可以全站2013-02-27
- 曾经一度的采用滤镜的方法搞定这个问题，弊端是当有多个png图片的时候，这就造成了css的压力，得写多少css代码呀，也尝试过js，缺点是不支持CSS中backgrond-position与back2013-09-11
最新评论