右侧元素上的渐变叠加

Question

我创建了一个包含可滚动元素的容器。我希望右侧的元素具有渐变叠加。如何使用CSS创建它？

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 1000px;
}

.element {
  min-width: 200px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
}

＆＃13;

<div class="container">
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
  <div class="element">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://codepen.io/naomilea/pen/RjZGaM

Answer 1

如果您只是想要最后一个具有渐变颜色的元素，您可以像这样对css进行编码：

   .container {
  
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 1000px;
}
.element {
    min-width: 200px;
    height: 100px;
    background-color: grey;
    margin-right: 10px;

  }
.element:last-child
{
  background: -webkit-linear-gradient(to right, grey, white);
  background: -o-linear-gradient(to right, grey, white);
  background: -moz-linear-gradient(to right, grey, white);
  background: linear-gradient(to right, grey, white);
}

<div class="container">
  <div class="element">
  </div>
   <div class="element">
  </div>
   <div class="element">
  </div>
   <div class="element">
  </div>
   <div class="element">
  </div>
   <div class="element">
  </div>
 <div class="element">
  </div>
 
 
 
</div>

nextSibling

Answer 2

将此添加到要添加渐变样式的div元素

.element {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left, red, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, red, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , white); /* Standard syntax */
}