是否可以使用 css 在水平可滚动内容上放置叠加 div - 没有 JS

Question

I have div with horizontal scrollable content. Trying to apply overlay for the entire content just using css. This scrollable content may keep growing. Is there a way to achieve this without javascript code.

 .bg { height: 50px; width: 50px; display: flex; } .container { display: flex; overflow-x: auto; width: 300px; align-items: flex-start; position: relative; flex-direction: row; } .overlay { position: absolute; background-color: #888888; top: 0; opacity: 0.8; bottom: 0; right: 0; left: 0; }

 <div class="container"> <div class="overlay"> </div> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> </div>

Answer 1

try this

Using the overlay effect by flex property instead of absolute positioning .

.overlay{
  white-space:nowrap;  display: flex;
  align-items: flex-start;
  flex-direction: row;
  background-color: #888888;
  opacity: 0.8;
}

And add the images inside the overlay div

<div class="container">
  <div class="overlay">
    <-- images here --->
  </div>
</div>

 .bg { height: 50px; width: 50px; display: flex; } .container { display: flex; overflow-x: auto; width: 300px; align-items: flex-start; position: relative; flex-direction: row; } .overlay{ white-space:nowrap; display: flex; align-items: flex-start; flex-direction: row; background-color: #888888; opacity: 0.8; } .images img{ white-space: normal;}

 <div class="container"> <div class="overlay"> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg"/> </div> </div>

Answer 2

position:sticky can do it:

 .bg { height: 50px; width: 50px; display: flex; } .container { display: flex; overflow-x: auto; width: 300px; position: relative; flex-direction: row; } .overlay { position: sticky; width:inherit; margin-right:-300px; flex-shrink:0; left:0; background-color: #888888; opacity: 0.8; }

 <div class="container"> <div class="overlay"> </div> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> <img src="https://opensource.org/files/osi_keyhole_300X300_90ppi_0.png" class="bg" /> </div>