Question

代码：

$("#button1").click(function(){
    $("img").fadeOut();
});

淡出整个元素，但我想淡化图像的特定部分，如顶部4px和左边2px。如果需要CSS3方法，我准备这样做。

Answer 1

HTML code：

.container {
    position: relative;
    width: 400px;
    height: 400px;
}

.image {
    width: 100%;
    height: 100%;
    background: url(/*your url*/);
}

.mask {
    position: absolute;
    background: #000;
}

.width100 { width: 100% }
.width10 { width: 10% }
.width3 { width: 3% }
/* etc */

height3 { height: 3% }
height30 { height: 30% } 
height100 { height: 100% }
/* etc */

top0 { top: 0 }
top5 { top: 5% }
/* etc */

CSS代码：

absolute

您的面具有.widthXX个位置，您可以使用.heightXX和.topXX类设置.leftXX和$('.mask')类+关于图像的位置。（这不是理想的方法，但可以快速完成）

与JS相比，您可以检测所有掩码（使用jQuery - .hide()）制作一个对象数组（如果需要），并隐藏tham .fadeOut()或{{1行顺序（0,1,2,3 ...）或随机的方法（获取数组的随机索引，隐藏它，并从数组中删除元素）。

希望你理解我的想法，并使它变得更好，更有趣：）

如何使用jQuery来fadeOut（）单个图像的不同部分？

1 个答案: