Question

我有一个带子div的flexbox容器：

.flex-l, .flex-c {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-l {
  justify-content: flex-start;
}

.flex-c {
  justify-content: center;
}

.sidebar {
  width: 100%;
  height: 100vh;
  background: rgba(0 ,0 ,0 ,0.05);
}

.selector-bar {
  width: 90%;
  height: 5vh;
  overflow: auto;
}

.selector-bar::-webkit-scrollbar {
  display: none;
}

.sidebar-group-img, .sidebar-friend-img {
  height: 2.2vw;
  width: 2.2vw;
  margin: 0.2vw;
  flex-shrink: 0;
}

.sidebar-group-img {
  background: rgba(46, 204, 113, 0.6);
}

.group-chat-text {
  opacity: 0;
  transition: 1s;
  position: relative;
  z-index: 10;
  transform: translate(21px);
}

.group-chat-img {
  opacity: 1;
  transition: 1s;
  position: relative;
  z-index: 11;
  transform: translate(-17px)
}

.sidebar-group-img:hover .group-chat-text {
  opacity: 1;
  transition: 0.2s;
}

.sidebar-group-img:hover .group-chat-img {
  opacity: 0.25;
  transition: 0.2s;
}

<div class="flex-l selector-bar">
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-1.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-2.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-3.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-4.png" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-5.jpg" alt="Group Logo">
  </div>
</div>

我想像这样向selector-bar容器中添加淡入淡出效果： https://codepen.io/timothylong/pen/RodjKW

问题是我的容器背景是透明的，所以我不能简单地使用linear-gradient。我已经尝试过，但是我想不出一种不降低不透明度的方法。

我也看到了这一点： https://codepen.io/annalarson/pen/GesqK 我也不想这么做，因为我想在没有用户交互的情况下直观地看到渐变。

我看到的唯一实现此目的的方法是将子元素本身作为目标，并使其在靠近容器边缘时褪色。但是我无法理解JS。

我也在使用香草JS。不是jQuery。

这可能吗？

Answer 1

您可以在所有项目的容器下添加一个div元素，并为其提供绝对位置和渐变背景。还必须具有另一个具有相对位置的容器元素，并将这两个容器放入其中。这是一个例子：

<div id="mainContainer">
    <div id="itemsContainer">
        <div class="itemOuter">Item 1</div>
        <div class="itemOuter">Item 2</div>
        <div class="itemOuter">Item 3</div>
        <div class="itemOuter">Item 4</div>
    </div>
    <div id="overlayContainer"></div>
  </div>

#mainContainer{
    position: relative;
}
#overlayContainer{
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    height: 100%;
    pointer-events: none;
background: -moz-linear-gradient(top, rgba(30,87,153,0) 50%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

在滚动div的边缘上淡化子级flexbox元素？

1 个答案: