透明圆框架中的矩形图像

Question

我刚开始使用CSS。

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

Answer 1

这是一个如何做的粗略演示： http://jsfiddle.net/jalbertbowdenii/vfac6L4x/
使用你的pix，只需为img元素添加正确的url，并更改蒙版容器div的backgroudn颜色以及图像的边框颜色。
如果你想要更多信息，请搜索css mask
因为stackoverflow需要这个：

.mask{background-color:#000}
img{display:block; margin-left:auto; margin-right:auto;
border-radius:25px; border:solid #000}

和标记

<div class="mask">
  <img src="https://photos-6.dropbox.com/t/1/AAASULb1odiWJlk3dyEG-rF4B0baCCQ2D9aoTqXZiYZW6w/12/107220852/jpeg/1024x768/3/1416250800/0/2/trans-cirecle.jpg/VFul9uUE7QKOIrYKVNy58z9JzoOHj9UK3AGRUsSFbgY" />
</div>

Answer 2

这是你要找的吗？

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

＆＃13;

＆＃13;

.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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

将border-radius:50%添加到图像中; img{}

将border-radius的值更改为各种像素值和百分比值，以获得更多效果。