Html 在同一行中的图像上重叠透明阴影

我试图让某些阴影（在4或6之间，带有透明度）在网页的一行上重叠一些图像。

以下HTML代码垂直堆叠图像，而不是并排堆叠，透明阴影也是如此：

<div class = "component" style = "width: 1000px; height: 751px; background:             url(testimg.jpg)">
  <div class = "temperature" style = "background-color: #B80000; width: 500px; height: 751px; opacity: 0.6"></div>
  <div class = "temperature" style = "background-color: #680000; width: 500px; height: 751px; opacity: 0.6"></div>
</div>
<div class = "component" style = "width: 1000px; height: 751px; background: url(testimg.jpg)">
</div>

---

如何正确显示这些组件？

您需要将这些组件浮动到左侧：

<div class = "component" style = "width: 1000px; height: 751px; background:             url(testimg.jpg)">
<div class = "temperature" style = "float: left; background-color: #B80000; width: 500px; height: 751px; opacity: 0.6"></div>
<div class = "temperature" style = "float: left; background-color: #680000; width: 500px; height: 751px; opacity: 0.6"></div>
</div>
<div class = "component" style = "width: 1000px; height: 751px; background: url(testimg.jpg)">
</div>

---

请看这个JSFIDLE:

非常简单，谢谢。。如果图像超过屏幕的水平宽度，它们不会开始新的一行，而是能够水平滚动，有什么想法吗？在这种情况下，您可能需要删除

组件

类的

宽度：1000px

，但没有看到示例，我不确定您想要实现什么，尝试使用我发布的JSFIDLE，保存后我会回复您。