Question

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

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

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

Answer 1

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

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

设置img-responsive的类以确保图像使用列调整大小。

Answer 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。我试着在评论中写这个，但我还没有足够的权利

交叉渐变图像重叠文本

2 个答案: