<p class="shade"></p>
<div class="tanceng">
<p class="cue">亲，活动还在继续，5月6日-5月8日抽奖，要累计50万以上才可参加哦~</p>
<p class="okbtn pt5">
<a href="javascript:void(0)">确 定</a>
</p>
</div>
CSS：
.shade{
width: 100%
background-color: rgba(0,0,0,0.3)
position: fixed
left: 0
top: 0
display: none
}
.tanceng{
background-color: #ffeb8d
width: 240px
padding: 20px
line-height: 200%
color: #f31b33
position: fixed
top: 20%
left: 50%
border-radius: 0.6rem
margin-left: -140px
display: none
}
.okbtn a{
display: block
width: 80%
background-color: #f31b33
color: #fff
line-height: 250%
font-size: 16px
text-align: center
border-radius: 5px
margin:0 auto
}
JS:
var webH = $(window).height()
//这里显示遮罩
$("#inner").click(function(e){ //#inner就是你要点击出现遮罩的按钮
$(".shade,.tanceng").css("display","block")
$(".shade").height(webH)
$(".cue").html("亲，活动还在继续，5月6日-5月8日抽奖，要累计购买50万以上才可参加哦~")
//这个可以不要，这是我自己的东西
})
//这里隐藏遮罩
$(".okbtn").click(function(e){
$(".shade,.tanceng").css("display","none")
$(".shade").height(0)
})
方法一：
HTML5+CSS，注意，只有支持HTML5的浏览器才行，百度的也一样，我用搜狗浏览器切换到IE内核就变成正方形图片了。代码如下
<style>img {
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
}
</style>
<body>
<img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/ting/s%3D90/sign=f04adce1d42a60595610ed1a2834fa08/b2de9c82d158ccbfcdc485121ad8bc3eb1354199.jpg">
</body>
方法二：
把图片设置成DIV的背景，然后在DIV里再装一张有圆形孔的GIF图片，中间的圆形孔做成透明。
此方法兼容所有浏览器。
<param name="wmode" value="opaque" />货<embed wmode="opaque"></embed>
按照上面 就可以解决
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）