css3圆形图像不起作用

时间：2013-02-21 03:03:41

标签： html css css3

我正在尝试使用css 3制作方形图片。

每个请求发布我的整个代码 HTML 

<!DOCTYPE html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Hello</title>
    <link type="text/css" href="home_page.css" rel="stylesheet" />
  </head>
  <body>
<span class="image-wrap " style="display:inline-block; background:url(pic1.png);">
<img src="pic1.png" style="opacity: 0;"></span>
 </body>
</html>

css：在home_page.css里面

.image-wrap {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}

1 个答案:

答案 0 :(得分：10)

您需要将<img>设置为display: block并设置其border-radius，而不是父元素。您还可以将50%用于循环元素。并从图片中删除opacity: 0，否则它将不可见。我已经包含了一个background-image: url()示例，以防这是您的问题。

演示： jsFiddle

输出：

  

enter image description here

CSS：

.circle {
    border: 1px solid black;
    border-radius: 50%;
    display: inline-block;
}
.circle img {
    border-radius: 50%;
    display: block;
}
.background-circle {
    background-image: url( 'http://lorempixel.com/200/200/cats/' );
    height: 200px;
    width: 200px;
}

HTML：

<div class="circle"><img src="http://lorempixel.com/200/200/cats/" /></div>
<div class="background-circle circle"></div>
相关问题
最新问题