已经尝试过：

Question

似乎已经知道此问题几年了。我根据此示例https://codepen.io/ariona/pen/geFIK尝试将模糊的背景应用于类“ .blurred-bg”的内部元素。它具有一张用作主体元素背景的清晰版本图像，而同一图像的模糊版本应用于类别为.blurred-bg的元素。

这是我的代码，您知道吗，我该怎么做才能使它起作用？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>blurred background sablona</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;                
                background-image: url("https://lh4.googleusercontent.com/-3eBjuQpOGFw/U47yh_-OycI/AAAAAAAAI2U/uaU5pK49N1w/s1600/normal.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                background-attachment: fixed;
            }
            
            .blurred-bg {
                background-image: url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    -webkit-background-size: cover;
                background-attachment: fixed;
                border-radius: 10px;
            }
            
            
            #centered_div {background: red;padding: 10px; text-align: center;color: white}
            .LISTS_CONTAINER{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                overflow-x: auto;
                justify-content: center;
            }
            .LIST_WRAPPER {
                margin: 20px;
                box-shadow: 
                    0 2px 2px 0 rgba(0,0,0,0.14), 
                    0 3px 1px -2px rgba(0,0,0,0.12), 
                    0 1px 5px 0 rgba(0,0,0,0.2);
                box-sizing: border-box;
                width:; /* width cannot be set, because this div needs to adjust to its content*/
                height:; /* height cannot be set, because this div needs to adjust to its content*/
            }
            .LIST{
                grid-gap: 0px;
                width: 400px;
                height: 305px;
                position: relative; /* this needs to stay relative */
                background: rgba(0,0,0,); /*change opacity to make div darker*/
                border-radius: 10px;
                color: white;
                font-size: 30px;
                text-align: center;
                margin-top: 10px;
            }
            
        </style>
    </head>
    <body>
        <div id="centered_div">
            DIVs with blurred background while you scroll.<br>On desktop Safari & Chrome it works, but on mobile the background is no more fixed.
        </div> 
        
        <div class="LISTS_CONTAINER">
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
            
            <div class="LIST_WRAPPER blurred-bg">
                <div class="LIST">scroll down</div>
            </div>
        </div>
        
    </body>
</html>

已经尝试过：

1。尝试：使用javascript，并添加：

    $ (window).scroll(function() {
        var scrolledY = $(window).scrollTop();
        $('.blurred-bg').css('background-position', 'left' + ((scrolledY)) + 'px');
    });

，还必须将background-position: left top应用于类.blurred-bg的样式。
在平板电脑和移动设备上进行了测试-没有成功。

2。尝试：将所有内容都包裹在一个父包装中，将高度设置为500px并自动溢出。
在平板电脑和移动设备上进行了测试-没有成功。

3。尝试：将属性从backgroundAttachment='fixed';更改为backgroundAttachment='scroll';也没有帮助。

在桌面上它可以很好地工作，但是在移动浏览器上，由于不再支持background-attachment: fixed;，因此效果被破坏了。根据我在网上发现的内容，它要求更高的性能，这对移动设备不利。我发现了各种变通办法，并且在堆栈溢出的帖子中也找到了很多想法，但是没有一个对我有用。已经是早上了，我没有使它起作用，所以也许你们有想法。

Answer 1

我也有同样的问题。令人遗憾的是，移动浏览器已禁用该功能，因为这可能会对他们造成太大的损失。不过它可以在Firefox上运行。

带有背景附件的元素：固定的在移动设备上的行为与在台式机上的行为不同

已经尝试过：

1 个答案: