在 Jquery 中定位图像答案

【问题标题】：Target an image in Jquery在 Jquery 中定位图像
【发布时间】：2015-08-14 19:22:51
【问题描述】：

我只需要定位图像，唯一的问题是图像被设置为“hero1project3”类的背景。我需要它留在这个类中，我的 jquery 中有没有一种方法可以让图像模糊，例如“.hero1project3 img”

HTML：

 <div class="hero1project3">
     <div class="blur">
 </div>

 <div id="hero1titleproject1">
     <h1>Information Design: <br>Zumerset Cyder Appl's.</h1>
 </div>

jquery：

$(document).scroll(function(){
    if($(this).scrollTop() >0){
        $('#hero1titleproject1').css({'webkit-filter':'blur(5px)', 'filter':'blur(5px)'});
    } else {
        $('#hero1titleproject1').css({'webkit-filter':'', 'filter':''});
    }
});

CSS：

.hero1project3 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(../Information_Design_Zumerset_Project3_hero.jpg);
    background-position:50%;
    background-size:cover;
    transition:all .5s
}

div.project.project3img2 {
    background-color: rgb(255,255,255);
}

【问题讨论】：

不知道为什么你会被否决 - 似乎你已经尝试解决你的问题并需要帮助。
您的 css 对获得好的答案非常有帮助。
如果图像是背景，则它不在要定位的 dom 中。我根本不希望 css 影响背景图像。要应用模糊，我怀疑您需要在 dom 中使用实际的图像标签。
也许这会有所帮助：stackoverflow.com/a/20411411/752527
CSS blur on background image but not on content的可能重复

标签： javascript jquery html css

【解决方案1】：

使用 img 作为选择器意味着您正在尝试选择 hero1project3 下的 img 标签，由于您使用的是通过 CSS 设置为 .hero1project3 的背景图像，因此该标签不存在。

查看此答案以了解如何模糊背景图像：How to apply a CSS 3 blur filter to a background image

【讨论】：

查看链接答案时，请检查有关使用 :before 的评论 - 这是最好的方法。