怎么用css实现图片透明效果

时间：2015-06-05 10:47:38 　来源：免费模板网　作者：风雪　阅读次数　tags效果 图片

我们有时候浏览别人的网站看到他的图片有类似透明的效果，感觉很吸引人，那么他是怎么是实现呢？css里面有实现透明的属性值可以设置，请看下文
使用CSS设置一个图片的透明效果

效果：可以通过前面的图片看到后面的图片
主要用的是filter:alpha(opacity=50);
其中50为透明值，0表示完全透明,100表示不透明。
详细代码：

代码如下

<HTML>
<HEAD>
  <TITLE> 图片透明效果 </TITLE>
<style>
  body {
  background-image: url(images/1.jpg);
  }
  #nav {
        width:760px;
        height:90px;
        margin:15px 0 0 10px;
        overflow:hidden;
        margin-top:100px;
        margin-left:20px;
        filter:alpha(opacity=50);
       background:url(http://www.111cn.net/banner/banner.gif) no-repeat;
}
</style>
</HEAD>

<BODY>
  <div id="nav">
  </div>
</BODY>
</HTML>

上篇：怎么让父容器自动适应高度

下篇：什么时候用lear:both清除浮动c

本文地址：https://www.freemoban.com/bjrm/2015/0605/2106.html

猜你喜欢