Question

客户要求我模仿iMessage聊天气泡，当您滚动时会产生淡入淡出效果，即顶部气泡比底部气泡稍微浅一些蓝色。

我能想到的最简单的方法（没有javascript）是基本背景有一个渐变，然后顶部的子元素有一个透明背景，所以当你滚动你得到孩子们的渐变背景。这是有效的，但填充气泡周围的白色空间已被证明是一个真正的挑战。

基本上我想知道是否有一些神奇的CSS课程允许我在忽略第一个父母背景的孩子身上应用背景并继承下面的那个。

例如：

<div class="gradient">
   <div class="container">
      <div class="child">
          I'm a bubble
      </div>
   </div>
</div>

.gradient {
    height: 500px;
    background: -webkit-linear-gradient(top, #7db9e8 0%,#1e5799 100%);
}
.container {
    height: 500px;
    /* I want this background to be around the child */
    background: white;
    position: relative;
}
.child {
    position: relative;
    top: 100px;
    left: 50%;
    height: 50px;
    width: 100px;
    /* I want the gradient background here NOT the container background */
    background: transparent;
    border: 1px solid black;
}

编辑：我们尝试用渐变类覆盖容器，但这会打破滚动并能够单击下面的按钮。

我们也尝试过边框，伪元素等，但调整大小通常会对此产生负面影响。

这适用于跨浏览器的桌面和平板电脑网站，因此必须有所回应。

非常感谢，

萨姆

Answer 1

我能想到的最简单的方法（没有javascript）是对于具有渐变的基本背景，然后是子元素在顶部有一个透明的背景..

如果你满足于只有淡入淡出效果（即渐变），那么就这样做吧。否则，您将陷入陷阱，然后识别每个卷轴上当前的顶部气泡，然后更改样式。很快这将成为你的噩梦。

将一个元素保持在顶部并给它一个渐变，以便通过透明度通过此元素可以看到最顶部的气泡，从而在滚动时淡出。

最简单的就是让你的标记像这样：

<div class="wrap"> <!-- The outermost wrapper for entire chat -->
    <div class="container"> <!-- The chat window container -->
        <div class="bubble"><p>msg</p></div> <!-- individual chat bubbles -->
    </div>
</div>

然后通过CSS将元素放在它上面：

.wrap::after {
    content: ''; position: relative; display: block; 
    top: -100%; left: 0;
    width: calc(100% - 16px); height: 64px;
    background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
}

这会将渐变放在聊天包装器窗口的顶部，并且气泡将在container内的下方滚动。

以下是来自此答案的演示：https://stackoverflow.com/a/27486767/1355315

Demo Snippet 1：

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
.wrap { margin: 8px; height: 80%; width: 50%; overflow: hidden; }
.container {
    background-color: #eee; 
    height: 100%; width: 100%; 
    overflow: auto;
}
.bubble { width: 100%; clear: both; } /* clear the floats here on parent */
.bubble p {
    border-radius: 5px;
    padding: 8px; margin: 8px 12px;
    max-width: 80%;  /* this will make it not exceed 80% and then wrap */
    position: relative;
}
.left p { background-color: #ccc; float: left; } /* floated left */
.right p { background-color: #33c; color: #fff; float: right; } /* floated right */

/* classes below are only for arrows, not relevant */
.left p::before {
    content: ''; position: absolute;
    width: 0; height: 0; left: -8px; top: 8px;
    border-top: 4px solid transparent;
    border-right: 8px solid #ccc;
    border-bottom: 4px solid transparent;
}
.right p::after {
    content: ''; position: absolute;
    width: 0; height: 0; right: -8px; bottom: 8px;
    border-top: 4px solid transparent;
    border-left: 8px solid #33c;
    border-bottom: 4px solid transparent;
}
.wrap::after {
    content: ''; position: relative;
    top: -100%; left: 0;
    display: block; width: calc(100% - 16px); height: 64px;
    background-image: linear-gradient(rgba(242,242,242,1), rgba(242,242,242,0));
}

<div class="wrap">
<div class="container">
    <div class="bubble left"><p>msg</p></div>
    <div class="bubble left"><p>long message</p></div>
    <div class="bubble right"><p>ultra long message which can wrap at eighty percent </p></div>
    <div class="bubble left"><p>lorem ipsum</p></div>
    <div class="bubble right"><p>very long message</p></div>    
    <div class="bubble right"><p>one more message</p></div>    
    <div class="bubble left"><p>lorem ipsum</p></div>
    <div class="bubble right"><p>another message</p></div>    
    <div class="bubble left"><p>lorem ipsum</p></div>
    <div class="bubble right"><p>yet another message</p></div>    
    <div class="bubble left"><p>lorem ipsum</p></div>
</div>
</div>

修改

模拟iMessage聊天气泡，它具有淡入淡出效果滚动，即顶部气泡是比蓝色稍浅的蓝色底部泡沫。

如果您想要完全模仿iMessage的行为，那么您必须记住没有淡入淡出效果。顶部气泡与其余气泡具有不同的颜色（接近青色）。没有阴影或褪色。

为了做到这一点，你将不得不求助于Javascript，因为CSS无法根据滚动确定当前位于顶部的气泡。只需连接容器的scroll事件，检查气泡的位置并相应地更改颜色。

以下是基于上述演示的纯Javascript示例（ no jQuery ）。

演示小提琴：http://jsfiddle.net/abhitalks/oop2dazy/1/

Demo Snippet 2：

var cw = document.getElementById('chatWindow'),
    threshold = 64;
cw.addEventListener('scroll', function(e) {
    var bubbles = cw.getElementsByClassName('right');
    [].forEach.call(bubbles, function(elem) {
        var top = elem.getBoundingClientRect().top
        if (top < threshold) { elem.classList.add('faded'); }
        else { elem.classList.remove('faded');}
    });
});

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
.wrap { margin: 8px; height: 80%; width: 50%; overflow: hidden; }
.container {
    background-color: #eee; 
    height: 100%; width: 100%; 
    overflow: auto;
}
.bubble { width: 100%; clear: both; } /* clear the floats here on parent */
.bubble p {
    border-radius: 5px;
    padding: 8px; margin: 8px 12px;
    max-width: 80%;  /* this will make it not exceed 80% and then wrap */
    position: relative; transition: background-color 0.5s; 
}
.left p { background-color: #ccc; float: left; } /* floated left */
.right p { background-color: #33c; color: #fff; float: right; } /* floated right */
/* classes below are only for arrows, not relevant */
.left p::before {
    content: ''; position: absolute;
    width: 0; height: 0; left: -8px; top: 8px;
    border-top: 4px solid transparent;
    border-right: 8px solid #ccc;
    border-bottom: 4px solid transparent;
}
.right p::after {
    content: ''; position: absolute;
    width: 0; height: 0; right: -8px; bottom: 8px;
    border-top: 4px solid transparent;
    border-left: 8px solid #33c;
    border-bottom: 4px solid transparent;
}
.bubble.faded p { background-color: #39c; }
.bubble.faded p::after { border-left: 8px solid #39c; }

<div class="wrap">
<div id="chatWindow" class="container">
    <div class="bubble left"><p>msg</p></div>
    <div class="bubble left"><p>long message</p></div>
    <div class="bubble right"><p>ultra long message which can wrap at eighty percent </p></div>
    <div class="bubble left"><p>lorem ipsum</p></div>
    <div class="bubble right"><p>very long message</p></div>    
    <div class="bubble right"><p>one more message</p></div>    
    <div class="bubble left"><p>lorem ipsum</p></div>
    <div class="bubble right"><p>another message</p></div>    
    <div class="bubble left"><p>lorem ipsum</p></div>
    <div class="bubble right"><p>yet another message</p></div>    
    <div class="bubble left"><p>lorem ipsum</p></div>
</div>
</div>

这将解决聊天窗口顶部模糊的问题。这将允许从顶部进行触摸滚动，并且不会阻碍气泡上的相互作用。

CSS子元素继承父元素的背景 - CSS中的iMessage

1 个答案:

修改