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

检查border-radius support hear还要检查this

看着你的代码似乎工作我已经在chrome，firefox和opera上测试了它。和它的工作。

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

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

注意但现代浏览器不需要这样做

Answer 2

我不确定为什么图像不会尊重border-radius属性。但是我能够使用背景图像让它工作。

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/

opera-radius中的border-radius和overflow

2 个答案: