我有一个嵌入YouTube的div.点击某些按钮后,我想要显示div(我知道如何实现这一点),但是我希望整个背景变得更暗. (这是与重叠式内联.)
我尝试使用透明度 – 我用 jquery改变整个html的透明度,即$(‘html’).css(‘opacity’,’ – 0.5′);并将div的不透明度恢复正常,但由于某种原因,div的不透明度保持不变(0.5).
我不喜欢不透明度,因为实际上它不会使背景更暗(更轻).
我尝试使用透明度 – 我用 jquery改变整个html的透明度,即$(‘html’).css(‘opacity’,’ – 0.5′);并将div的不透明度恢复正常,但由于某种原因,div的不透明度保持不变(0.5).
我不喜欢不透明度,因为实际上它不会使背景更暗(更轻).
任何想法如何使背景更暗？
解决方法
HTML–
<a id="some-button" href="#">click me</a> <div id="overlay-back"></div> <div id="overlay"><span>YOUR HTML GOES HERE</span></div>
CSS–
html,body {
width : 100%;
height : 100%;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
JS–
$('#some-button').on('click',function () {
$('#overlay,#overlay-back').fadeIn(500);
});
然后只需将您的YouTube视频嵌入代码添加到叠加层,并适当地对其进行风格,将其放在页面上您想要的位置.
这是一个演示：http://jsfiddle.net/EtHbf/1/
