用css实现透明效果

2025-07-27 02:21:56

用css实现透明效果要用css实现透明是一件很简单的事，只需用到css里的一个opacity声明。opacity声明用来设置一个元素的透明度：层、文字、图片等…opacity的值为1的元素是完全不透明的，反之，值为0是完全透明。当然，因为有ie的存在，事情变得有点不太简单了。我们先来看看css这条语句的浏

用css实现透明效果

要用css实现透明是一件很简单的事，只需用到css里的一个opacity声明。opacity声明用来设置一个元素的透明度：层、文字、图片等…opacity的值为1的元素是完全不透明的，反之，值为0是完全透明。

当然，因为有ie的存在，事情变得有点不太简单了。

我们先来看看css这条语句的浏览器支持情况吧：

看来还得解决ie的问题。我们都知道css里有个alpha滤镜,可以用这个解决ie的问题。

语法: STYLE=filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)
说明：
Opacity:起始值，取值为0-100,0为透明，100为原图.
FinishOpacity:目标值.
Style：1或2或
StartX：任意值
StartY：任意值

例子：filter:Alpha(Opacity=0,FinishOpacity=40,Style=2) 。在一般情况下只用filter:Alpha(Opacity= 0 )就差不多了。

下面看几个实现透明的页面截图：

源代码如下：

代码<html xmlns=>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>实现图片透明</title>
<style type=text/css>
    .a1{
        opacity:0.1;
        filter:Alpha(Opacity= 10 );
    }
    .a2{
        opacity:0.;
        filter:Alpha(Opacity= 0 );
    }
    .a{
        opacity:0.5;
        filter:Alpha(Opacity= 50 );
    }
    .a4{
        opacity:1;
        filter:Alpha(Opacity= 100 );
    }
</style>
</head>

<body>
    <img src=lufy.jpg alt= class=a1 />
    <img src=lufy.jpg alt= class=a2 />
    <img src=lufy.jpg alt= class=a />
    <img src=lufy.jpg alt= class=a4 />
</body>

好的，问题解决了，在ie和其他浏览器里都实现了透明。

但是，还存在着一个潜在的问题，继续看啦~

做网页经常要实现下面这个效果：

下面的条幅是有一定的透明度的，按理说我们可以像下面这样写：

代码<style type=text/css>
        div#pic{
            width:116px;
            height:16px;
            padding:0;margin:0;
            position:relative;
            background:transparent url(bag.jpg) 0 0 no-repeat;
        }

        div#pic span{
            padding:0;margin:0;
            display:block;
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            background-color:#99C;
            filter:Alpha(opacity:60);
            opacity:0.6;
            line-height:1.5em;
            color:#fff;
            font-weight:bold;
            text-align:center;
        }

</style>
</head>

<body>
    <div id=pic>
        <span>男孩和女孩</span>
    </div>
</body>

可是，出现的效果是这样的：

可以看出来，文字也透明了？也就是说如果父元素被设计了透明度，子元素也会变得透明，即使把它的透明度设为1或100也会依然是透明的。

那如何解决，让文字要成为透明元素的子元素就成了！

我们要再添加一个P元素作为透明的块，然后把p和span绝对定位到合适的位置。

代码：

代码<title>透明</title>
    <style type=text/css>
        div#pic{
            width:116px;
            height:16px;
            padding:0;margin:0;
            position:relative;
            background:transparent url(bag.jpg) 0 0 no-repeat;
        }

        div#pic p{
            padding:0;margin:0;
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            background-color:#99C;
            filter:Alpha(opacity:60);
            opacity:0.6;
            height:20px;
        }

        div#pic span{
            position:absolute;
            bottom:0;
            left:0;
            display:block;
            width:100%;
            font-size:14px;
            color:#fff;
            font-weight:bold;
            text-align:center;
        }

    </style>
</head>

<body>
    <div id=pic>
        <p></p>
        <span>男孩和女孩</span>
    </div>
</body>

效果就是下面这个样子了：

当然，实现这个效果的方法肯定不止这一种，你能想到更好的方法吗？

转载于:.html

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/shuma/857212.html

本站网友泄露公民个人信息	9分钟前发表
0为透明，100为原图.FinishOpacity
本站网友镜像模式	19分钟前发表
用css实现透明效果要用css实现透明是一件很简单的事，只需用到css里的一个opacity声明
本站网友小林芽衣	13分钟前发表
Alpha(Opacity= 10 ); } .a2{ opacity
本站网友深圳团购网站大全	28分钟前发表
当然，因为有ie的存在，事情变得有点不太简单了
本站网友东莞黄江	13分钟前发表
14px; color
本站网友高速公路网	19分钟前发表
100%; background-color

用css实现透明效果