css - 透明圆框中的矩形图像

Question

我刚刚开始使用 CSS。

我有一个矩形图像。我想把它放在背景上，并以具有光透明度的圆圈为例。

Answer 1

这是你要找的吗？

当您应用:border-radius: 50%; 到您的 img 时，它会根据您的需要得到一个圆圈。

.bg {
  background-color: mediumaquamarine;
  width: 500px;
  height: 500px;
  margin: auto
}
img {
  border-radius: 50%;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 50%;
  /* Firefox 1-3.6 */
  -moz-border-radius: 50%;
  border: 1px solid red;
  margin-left: 25%;
  margin-top: 25%;
  z-index: 1;
  position: relative;
  opacity: 0.8
}

<div class="bg">
  <img src="http://placehold.it/250x250&text=Image" />
</div>