使用css将图像显示为带圆圈的图像

Posted

技术标签:

【中文标题】使用css将图像显示为带圆圈的图像【英文标题】:Image to be displayed as a circled Image using css 【发布时间】:2011-12-06 16:01:47 【问题描述】:

这是我的代码 - 这适用于 chrome、firefox 和 safari .. 我已经在 Windows 7 上对其进行了测试 但是在 IE 8 和 Opera 浏览器中,以下代码不起作用,我没有显示带圆圈的图像,而是以方形形式获取图像

CSS

#hotspot-img1-0
top: 570px; 
left: 67px; 
height: 104px; 
width: 104px; 
border-top-left-radius: 52px; 
border-top-right-radius: 52px; 
border-bottom-right-radius: 52px; 
border-bottom-left-radius: 52px; 
box-shadow: 0px 2px 5px 0px; 
border-top-color: rgb(255, 255, 255); 
border-left-color: rgb(255, 255, 255); 
border-right-color: rgb(255, 255, 255); 
border-bottom-color: rgb(255, 255, 255); 
border-top-width: 2px; 
border-left-width: 2px; 
border-right-width: 2px; 
border-bottom-width: 2px; 
border-top-style: solid; 
border-left-style: solid; 
border-right-style: solid; 
border-bottom-style: solid

【问题讨论】:

对于 IE 可能是因为它不支持此类 css 属性,请尝试是否有任何可用的 hack (IE) 用于边框半径。 尝试破解它htmlremix.com/css/curved-corner-border-radius-cross-browser 或者只是制作一个透明的圆形 png,它仍然是一个正方形,看起来就像一个圆形 【参考方案1】:

@桑德赫斯特;第一件事不好的标记是这样写的:

<div>
  <ul>
    <li>
       <img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web">
    </li>
  </ul>
</div>

& 使用background-image 代替img 回答问题:

li
 background:url(image.jpg) no-repeat;
 -moz-border-radius:52px;
 -webkit-border-radius:52px;
 border-radius:52px;
width:200px;
height:200px;

【讨论】:

这可行,但图像不适合圆圈内,而是只有一部分显示在圆圈内 为适合div内的图像写入-moz-background-size:100% 100%; -webkit-background-size:100% 100%;【参考方案2】:

Internet Explorer 8 及更低版本中的border-radius CSS3 declaration is unsupported。您可以使用 -o-border-radius 声明在 Opera 中获得圆角边框。

CSS3 Pie 可能有助于在旧版本的 Internet Explorer 中获得圆形边框,但我建议将它们保留为方形图像(遵循 graceful degradation and progressive enhancement 的原则)。

【讨论】:

【参考方案3】:

这是一个 CSS3 问题。 IE 和 Opera 处理不好。如果您愿意,可以使用http://fetchak.com/ie-css3/ 之类的解决方案来解决它。

祝你好运!

【讨论】:

【参考方案4】:

目前 Opera(10.5 版以上)、Safari(5 版以上)和 Chrome(5 版以上)都支持当前 W3C 规范中原生定义的单独的border-*-radius 属性和border-radius 简写属性(尽管在边框样式转换、使用长度百分比等问题上仍然存在突出的错误)。 Mozilla Firefox(1.0 版以后)支持带有 -moz- 前缀的边界半径,尽管 Mozilla 实现与当前的 W3C 规范之间存在一些差异(见下文)。 更新:最近的 Firefox nightly 版本支持不带 -moz- 前缀的边界半径。 Safari 和 Chrome(以及其他基于 webkit 的浏览器)从版本 3 开始支持带有 -webkit- 前缀的边界半径(从版本 5 开始不再需要),尽管与当前规范再次存在一些差异(有关详细信息,请参阅本文旧版本的 Webkit 如何处理边界半径)。 甚至微软也承诺并在他们最近的预览版中展示了从 Internet Explorer 9 开始支持边界半径(不带前缀)。

http://www.css3.info/preview/rounded-border/

【讨论】:

【参考方案5】:

这是一个网站http://www.danielmall.com/,其中图像以圆形显示。该网站的作者使用 jquery 和 css 使其与 IE 和 firefox 一起工作。查看页面源代码,您将获得有关如何使用它的一些有趣信息。

【讨论】:

【参考方案6】:

图像地图可以为您做到。

Clicking content below image with higher z-index

http://jsfiddle.net/u9cYZ/

http://jsfiddle.net/u9cYZ/3/

【讨论】:

【参考方案7】:

据我所知,没有办法让 Opera 或 IE 使用 CSS 将&lt;img&gt; 剪辑成一个圆圈。不过,border-radius 会裁剪元素样式中设置的背景图像。

您也许可以clip things using SVG,但我无法让该页面上的任何示例在 Opera 中工作。

【讨论】:

另外,如果您在图像上使用border-radius,Opera 12 alpha 会将图像剪裁成圆形,因此这将适用于下一个版本的Opera。只需在图像上使用不带前缀的边框半径即可。

以上是关于使用css将图像显示为带圆圈的图像的主要内容,如果未能解决你的问题,请参考以下文章

如何在 html5 中显示 SVG 圆圈内的图像?

DirectX 图像纹理四边形在透明的地方显示底层控件颜色

绘制两个圆圈时实时取景显示奇怪的图像

通过在 imageview 中绘制圆圈裁剪图像

Flutter :在图像中单击的位置添加一个圆圈

如何在图像上画一个圆圈