老师为什么filter:alpha(opacity=20)无法使用

老师为什么filter:alpha(opacity=20)无法使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="CSS/lunbotu.css">
    <script type="text/javascript" src="JS/lunbotu.JS"></script>
</head>
<body>
       <div class="main">
           <!--图片轮播-->
           <div class="banner">
                <a href="">
                      <div class="banner-slide slide1 slide-active">
                           
                      </div>
                </a>
                   <a href="">
                      <div class="banner-slide slide2">
                           
                      </div>
                </a>
                   <a href="">
                      <div class="banner-slide slide3">
                           
                      </div>
                </a>
           </div>
           <!--上一张 下一张-->
           <a href="javascript:void(0)" class="button prev"></a>
           <a href="javascript:void(0)" class="button next"></a>
       </div>
</body>
</html>

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

body{

font-family:"微软雅黑";

color: #14191e;

}

.main{

width: 1200px;

height: 460px;

margin: 30px auto;

overflow: hidden;

position: relative;

}

.banner{

width: 1200px;

height: 460px;

overflow: hidden;

position:relative;

}

.banner-slide{

width: 1200px;

height: 460px;

background-repeat:no-repeat;

position: absolute;

display: none;

}

.slide-active{

display: block;

}

.slide1{

background-image:url("../img/bg1.jpg");

}

.slide2{

background-image:url("../img/bg2.jpg");

}

.slide3{

background-image:url("../img/bg3.jpg");

}

.button{

    position: absolute;

    width: 40px;

    height: 80px;

    left: 244px;

    top: 50%;

    margin-top: -40px;

    background:url(../img/arrow.png) no-repeat center center;

}

.button:hover{

background-color:#333;

opacity: 0.2;

filter:alpha(opacity=20);/*透明度的修改*/


}

.prev{

transform:rotate(180deg);/*控制旋转角度*/

}

.next{

left:auto;

right: 0px;

}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕酷酷 2019-10-31 14:10:25

同学你好,代码编写的不错,这里filter:Alpha(opacity=20)与opacity一样都是设置透明度的,但是opacity 所有浏览器都支持,但是在IE8及以下的版本是不兼容的,所以需要设置filter:Alpha(opacity=20)来支持其他的浏览器。也就是当同学的浏览器不是IE8及以下的版本时,opacity就是设置透明度的。filter:Alpha(opacity=20)也就不生效啦~

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码