Question

我正在尝试展示图像，但却难以保存。所以我的想法是拥有一个图像div，并在它上面另一个带有背景颜色的div（所以隐藏它）。然后在mousedown上使用jquery在空div上显示none。认为这很简单。在我的代码中添加鼠标按下功能似乎总是隐藏黑色div。任何想法都欢迎并提前感谢。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
        .image {
            position: relative;
        }
        .black {
            position: absolute;
            top:0px;
            left:0px;
            background-color: #000;
        }
    </style>    
    <script src="jquery.js"></script>
    <script>
        $( document ).ready(function() {

           var imageHeight=$('.image img').outerHeight();
           var imageWidth=$('.image img').outerWidth();
           $('.black').css('height',imageHeight);
           $('.black').css('width',imageWidth);

           $('.black').mouseover( function() {
                $(this).css('display','none');
            )}; 
        });
    </script>
</head>
<body>
    <div class="image">
        <img src="image18.jpeg" alt="image" />
        <div class="black"></div>
    </div>  
</body>
</html>

Answer 1

为什么不在图像上叠加透明div？它是关于你将获得的最好的，因为如果用户进入他们的浏览器检查员或拉出截图程序，那么无论如何都不会有任何效果。

示例JSFiddle（尝试右键单击，另存为图像）：https://jsfiddle.net/ft47Lcsj/

＆＃13;

.image {
    position: relative;
    display: inline-block;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

<div class="image">
    <img src="http://i.imgur.com/5LGqY2p.jpg?1" alt="image" />
    <div class="overlay"></div>
</div>

＆＃13;

Answer 2

它可能会阻止大多数人，但我可以按照以下方式获取图像：

借助Chrome开发者工具，我可以轻松地从“网络/图片”
从代码中模拟鼠标事件
安装Jing，Screencast或任何其他实用程序，允许我从浏览器标签捕获视频或制作延迟屏幕截图

Answer 3

我认为它始终隐藏空白div的原因是因为在mouseover事件中，您通过应用display: none设置隐藏的空白div，但您不是删除mouseout / mouseleave上的此CSS属性。

$('.black').mouseout( function() {
    $(this).css('display','');
)};

图像保护。仅在.mousedown（jquery）上显示图像

3 个答案: