在同一行中的图像上重叠透明色调

Question

我正在尝试使用某些阴影（在4或6之间，具有透明度）与网页的一行上的几个图像重叠。 Desired Outcome

以下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>

如何正确显示？

Answer 1

您需要将这些组件浮动起来：

<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>

请参阅此JSFiddle：http://jsfiddle.net/79ny3/