我一直试图创建一种图像幻灯片。问题是在Firefox中它正确显示 圆角,但在铬圆角(使用css3)被隐藏在后面,虽然它在那里。 这是我的工作演示: http://anisa.me/work/ 任何帮助都将受到高度赞赏。
答案 0 :(得分:2)
我成功地使用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将圆角设置为最后一个A元素的右下角。
$('#bi-min a:last').css("border-radius","0 0 10px 0")
如果您发现难以遵循,可以将其发布到jsfiddle。
此致
答案 1 :(得分:1)
你的问题不太对劲。听起来应该是“为什么FF会正确显示圆角图像?” :) FF是唯一支持它的人。
可能的解决方案:
如果图像具有固定大小,您可以插入一些大小相同的html元素(span或div),并将图像作为此元素的背景。然后必须隐藏图像。 例如:http://arsen.ws/folio/craft-design/cosmic-games.html
将角落保存为单独的图像,并将每个角落放置在图像的适当角落上方。