我正在尝试使用 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:inside home_page.css
.image-wrap {
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
}
最佳答案
您需要设置 <img>至 display: block并设置它的 border-radius ，而不是或除了父元素。您也可以使用 50%对于圆形元素。并删除 opacity: 0从图像或它将是不可见的。我包括了一个 background-image: url()示例也是如此，以防这是您的问题。
演示: 
输出:
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>
关于html - css3 圆形图像不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14993875/