gpt4 book ai didi

html - css3 圆形图像不工作

转载 作者:太空狗 更新时间:2023-10-29 15:35:53 26 4
gpt4 key购买 nike

我正在尝试使用 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()示例也是如此,以防这是您的问题。

演示: 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>

关于html - css3 圆形图像不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14993875/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com