html - Opera浏览器中的边界半径和溢出

Question

我想在圆形 div 中显示一部分图像。我有一个代码，但它在 Opera 中不起作用。

CSS：

body {
    background-color: silver;
}
div {
      width: 90px;
      height: 90px;
      border: 1px solid;
      overflow: hidden;
      border-radius: 45px;
}
img {
      margin-left: -75px;
      width: 350px;
      height: 90px;
}​

HTML：

<div>
      <img src="http://diskuse.jakpsatweb.cz/img/logo.png">
</div>​

http://jsfiddle.net/vpfEY/6/

我该如何解决？

Answer 1

检查边界半径支持听到也检查这个

看着你的代码，我已经在 chrome、firefox 和 opera 上对其进行了测试。及其工作。

如果您使用的是旧版本，请尝试使用

-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;

注意但这对于现代浏览器不是必需的

Answer 2

我不确定为什么图像不尊重边界半径属性。但是，我能够使用背景图像让它工作。

HTML

<div></div>

CSS：

body {
    background-color: silver;
}
div {
      width: 90px;
      height: 90px;
      border: 1px solid;
      overflow: hidden;
      border-radius: 45px;
      background:url(http://diskuse.jakpsatweb.cz/img/logo.png) -115px 0 no-repeat;
}

http://jsfiddle.net/vpfEY/18/