我正在尝试使用object-fit
让Modernizr
在IE上工作。
这是我的HTML:
<div class="col-xs-6 col-sm-3">
<div class="post featuredpost">
<a href="'.$cblok['alias'].'.html" class="hoverBorder">
<span class="cftoverlay"><img src="images/overlay.png"></span>
<span class="hoverBorderWrapper">
<img src="'.$image.'" class="img-responsive featuredarticles" width="370" height="400" alt="" title="">
<span class="theHoverBorder"></span>
</span>
</a>
<div class="post-details">
<h3 class="m_title"><a href="'.$cblok['alias'].'.html">'.$cblok['title'].'</a></h3>
<em> <a>'.strip_tags($shortstr).'</a></em>
</div>
</div>
</div>
这是我的js:
if ( ! Modernizr.objectfit ) {
tpj('.featuredpost').each(function () {
var $container = tpj(this),
imgUrl = $container.find('img').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
}
此代码将overlay.png添加为背景图像,这是有道理的,因为这是代码遇到的第一个img标记。我需要第二个图像作为背景图像(具有img-responsive
类的图像)。
如何确保使用第二张图片?