文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使背景的其余部分变暗当你点击一张图片，它就会弹出来

问如何使背景的其余部分变暗当你点击一张图片，它就会弹出来
EN

Stack Overflow用户

提问于 2016-04-26 04:33:36

回答 1查看 385关注 0票数 0

嘿，我现在正在做一个网站，我已经设置了图片，所以当你点击它们时，它们会变得更大，并进入页面的中心。这工作得很好，但我试图使网页的其余部分(除了大图片)变得更暗一些。

一个例子是，如果你打开一张facebook图片，你可以看到页面的其余部分变黑，不透明度约为0.5

这是我为jquery中的函数编写的一些代码

$(this).click(function(evt){
                    $("#bigimg").attr("src", imageURL);
                    $("#bigimg").attr("style", "display:block");

                    evt.preventDefault();

                    $('body').css('opacity', '0.5');
                    $('#bigimg').css('opacity', '1');

                });

当我运行这个程序时，当我想让图片(#bigimg)保持正常亮度时，整个网页的不透明度为0.5。

任何帮助都将不胜感激！

html

css

jquery

回答 1

Stack Overflow用户

发布于 2016-04-26 04:41:27

将不透明度应用于body会将其应用于其中的所有内容。您需要创建一个具有所需不透明度的div，并将其添加到您的身体中，然后添加具有更高z索引的图像

var mask = $('<div class="bgmask"></div>');
$('body').append(mask);

css：

.bgmask {
  background: #000;
  opacity: 0.5;
  z-index: 100;
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36850540

复制

相似问题

问如何使背景的其余部分变暗当你点击一张图片，它就会弹出来
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使背景的其余部分变暗当你点击一张图片，它就会弹出来EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使背景的其余部分变暗当你点击一张图片，它就会弹出来
EN