我有一个嵌入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/
