时间戳

首页 > 解决方案 > 背景图像不重复动态添加的内容

css - 背景图像不重复动态添加的内容

问题描述

我们在网站上有一个小聊天，其中一些背景图片在聊天中看起来很酷，但是当客户点击订单状态时，它会询问订单否，但是当添加此内容时，背景图片会消失

我们在stackoverflow中尝试了几个线程，但没有任何效果

我们尝试添加这些东西

background-size: cover;
    /* background-size: 100% 100%; */
    background-repeat: repeat;

当我们将高度增加到 1000% 时，它可以工作并显示图像，但是我们的 scrollTop 到了错误的位置

这是我们感兴趣的代码和类 pushdaddy-body pushy-whatsapp-body

.pushy-whatsapp-body:before {
    display: block;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    opacity: .08;
    background-image: url(https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870);

这是现场站点，您可以在其中测试 https://itsneotpras.myshopify.com/

点击聊天，然后点击订单状态

标签： css

解决方案

不要使用:before高度为 100% 的绝对值，因为 100% 是相对于父高度的。

相反，这里有三个解决方案：

1.新增通用父元素

创建另一个简单的DIV 包装器，min-height: 100%它将成为您的 message 的新父级。这样，最小高度将相对于父级，但是一旦您收到更多消息 - 它会随着内容的增长而增长。也不要让它的位置绝对。

  • PS：背景会随着滚动而移动！

2. 让它变得粘稠

添加到您的 :before 伪：

  content: "";
  position: sticky;   /* instead of absolute */
  • PS：背景不会随着滚动而移动！

3. 家长背景

另一种方法是，如果您希望“固定”背景，请在图像编辑器中更改背景不透明度，并将其分配给.pushy-whatsapp-body元素。

  • PS：背景不会随着滚动而移动！

推荐阅读