交叉淡化图像重叠文本答案

【问题标题】：Crossfading Image Overlapping Text交叉淡化图像重叠文本
【发布时间】：2016-07-21 07:08:01
【问题描述】：

所以我创建了一个在两个图像之间转换的交叉淡入淡出效果。这些图像位于引导列中，旁边的另一列中包含文本。我的问题是，当浏览器小于 990px（宽度）时，引导列不会像假设的那样响应，因为图像放在文本后面而不是上面。我知道它与position: absolute 有关，因为当我把它拿出来时，它可以正常工作。但是，您需要它才能使交叉淡入淡出工作。

有什么方法可以解决这个问题，或者是在图像之间创建交叉淡入淡出的更好方法，或者如何在当前状态下修复它？

https://jsfiddle.net/8kec7wnw/8/

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

这样做的原因是使用了col-md-4 和col-md-8。 Bootstrap 中的这些类会影响屏幕尺寸高于和低于 992 像素的布局。将它们调整为 col-sm-4 和 col-sm-8 以使断点为 768 像素，或 col-xs-4 和 col-xs-8 将断点设置为移动屏幕及以上。

但是，由于图像是固定宽度的，因此这种布局永远不会真正响应。我建议在 Bootstrap 列中包含图像，并根据列设置它们的大小。

设置img-responsive的类，保证图片随列调整大小。

【讨论】：

【解决方案2】：

Toby 是对的。我测试了他的答案 (https://jsfiddle.net/omarlin25/8kec7wnw/13/) 并且有效。

             <div class="row">
                <div class="col-md-4 col-sm-8 col-xs-4 slides">
                  <img class="img-responsive" src="http://www.iconarchive.com/download/i18083/icons-land/vista-style-emoticons/Cool.ico">
                  <img class="img-responsive" src="https://pbs.twimg.com/profile_images/692846828132282371/foet1dNz.png">
                </div>
                <div class="col-md-8 col-sm-8 col-xs-8 content-padding">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nisi condimentum, elementum nibh non, imperdiet diam. Ut lobortis mollis varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nisi condimentum, elementum nibh non, imperdiet diam. Ut lobortis mollis varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nisi condimentum, elementum nibh non, imperdiet diam. Ut lobortis mollis varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nisi condimentum, elementum nibh non, imperdiet diam. Ut lobortis mollis varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               </div>
           </div>

PD。我试图在评论中写这个，但我还没有足够的权限

【讨论】：