Chrome 中圆 Angular 的 CSS 问题

Question

我一直在尝试创建一种图像幻灯片。问题是在 firefox 中它显示正确 带有圆 Angular ，但在 chrome 中圆 Angular (使用 css3)被“隐藏”在后面，尽管它在那里。这是我的工作演示: http://anisa.me/work/任何帮助将不胜感激。

Answer 1

我使用 jQuery 成功地实现了你想要的......

首先正确加载jQuery(目前没有加载)并添加这条css规则

#bi-max { border-radius: 0 0 0 10px; }

然后使用 JavaScript:

$('#bi-max').css("background","url("+jQuery("#bi-max img").attr('src')+")");
$('#bi-max img').css("opacity","0")

这样，大图像容器的背景就会变得像大图像一样......边框半径隐藏了它的其余部分。

然后我们将 A 元素的背景设置为它们包含的图像

$('#bi-min a').each(function(){
    jQuery(this).css("background","url("+jQuery(this).find("img").attr("src")+")");
})
$('#bi-min a img').css("opacity","0");

然后我们使用 jQuery 将圆 Angular 设置为最后一个 A 元素的右下角。

$('#bi-min a:last').css("border-radius","0 0 10px 0")

如果您觉得难以理解，可以将其发布到 jsfiddle。

问候