html - 我如何使用CSS将矩形图像放入网页的圆形分区内？尝试这样做时我应该记住哪些事情？

Question

我是初学者，想学习的请帮忙，这里archenemies是我给div的id。

---

div {
    height:100px;
    width:100px;
	display: inline-block;
	margin-left: 5px;
	border-radius:100%;
	border: 2px solid black;
	
}
#archenemies{
  border:4px solid #cc0000;
  background-image:"http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png";
  background-size:90%;
}

Answer 1

方法 1 - 使用背景图像。

创建圆形div时要记住的事情-

<强>1。 border-radius:50% 或更多

<强>2。 Backgound-imgage- 覆盖大小

<强>3。背景位置居中

下面是工作代码。

div {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin-left: 5px;
  border-radius: 50%;
  border: 2px solid black;
  border: 4px solid #cc0000;
  background-image: url(http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png);
  background-size: cover;
  background-position: center center;
}

<div> </div>

方法 2 - 使用 IMG SRC

div {
  width: 100px;
  height: 100px
}

img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 4px solid red
}

<div><img src="http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png" /></div>