如何滚动页面而不影响背景图片和固定元素？

Question

我制作了一个像聊天机器人一样支持的页面，即消息添加在顶部，表单字段添加在底部，当消息很多且无法放入屏幕时，它们会站在屏幕后面表单，它们在背景图像结束的地方向下移动，我希望只有消息在滚动时移动，而不是在表单后面，也就是说，背景附件是固定的，但如果我设置背景附件：固定;原来不是他想要的 我尝试使用

background-attachment:  fixed;

但没有帮助。固定元素是您的文本 html 代码：

<div id="img">
    <div class="container-fluid justify-content-center d-flex">
        <div class="blur-us">
            {% for mess in messages %}
            <div class="d-flex {% if loop.index is odd %}justify-content-start{% else %}justify-content-end{% endif %} mb-2">
                <div class="message bg-dark p-3" style="color:white;">{{ mess }}</div>
            </div>
            {% endfor %}
            <div>
                <div class="container my-form d-flex">
                    <form action="/contact" method="post" id="myForm">
                        <div class="position-relative">
                            <textarea id="dynamic-textarea" oninput="adjustHeight(this)" name="txtarea" data-limit-rows="true" maxlength="450" rows="1" class="mb-3 bg-dark" placeholder="Ask about site"></textarea>
                            <button type="submit" class="arr">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" class="icon-2xl">
                                    <path fill="currentColor" fill-rule="evenodd" d="M15.192 8.906a1.143 1.143 0 0 1 1.616 0l5.143 5.143a1.143 1.143 0 0 1-1.616 1.616l-3.192-3.192v9.813a1.143 1.143 0 0 1-2.286 0v-9.813l-3.192 3.192a1.143 1.143 0 1 1-1.616-1.616z" clip-rule="evenodd"></path>
                                </svg>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

CSS代码：

#img { background-image: url("coffeeShop.jpg"); height: 100vh; background-repeat: no-repeat; background-size: cover; } 

.blur-us {
height: 93vh;
width: 900px;
padding:50px;
padding-bottom:0px;
}

.my-form { position: fixed; bottom: 0; z-index:4; padding-top: 10px; }

#dynamic-textarea {
height: auto;
width: 800px;
padding: 15px;
padding-right: 70px;
box-sizing: border-box;
border-radius: 50px;
border: 1px solid #ccc;
resize: none;
color: #fff;
background-color: #333;
overflow-y: hidden;
}

Answer 1

我想出了如何解决这个问题，首先我添加了background-attachment：固定到id =“img”标签本身；接下来，我通过添加 2 个更新的 CSS 元素来更改结构：

    background-image: url("coffeeShop.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    overflow: hidden; /* Prevent scrollbars on the background */
}

.blur-us {
    height: calc(100vh - 75px); /* Adjust height based on the form height */
    width: 900px;
    padding: 50px;
    padding-bottom: 60px; /* Ensure space for fixed form */
    overflow-y: auto; /* Enable vertical scrolling */
    position: relative;
    margin: 0 auto; /* Center horizontally */
}

.messages-container {
    padding-bottom: 100px; /* Add space for fixed form */
}

.my-form {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-31.5%); /* Center horizontally */
    z-index: 4;
    width: 900px; /* Match the width of .blur-us */
    padding: 10px 0;
    box-sizing: border-box;
}

#dynamic-textarea {
    height: auto;
    width: 800px;
    padding: 15px;
    padding-right: 100px;
    box-sizing: border-box;
    border-radius: 50px;
    border: 1px solid #ccc;
    resize: none;
    color: #fff;
    background-color: #333;
    overflow-y: hidden;
}```