Question

假设我有一个这样大小的图像：

使用CSS3和诸如此类的东西，有没有办法让它像CD一样？你知道整个中间（最好是透明的）和圆形的边缘，什么不是。

Answer 1

我不确定透明的中间部分，但这会给你CD形状（http://jsfiddle.net/CkYcN/）：

HTML：

<div class="cd">
    <div class="hole"></div>
</div>

CSS：

.cd {
    -moz-border-radius: 63px;
    -webkit-border-radius: 63px;
    border-radius: 63px;
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg');
    width: 126px;
    height: 126px;
    position: relative;
}

.cd .hole {
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: #fff;
    left: 48px;
    top: 48px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

Answer 2

您可以使用CSS3 mask属性来实现该效果。它目前没有很好的浏览器支持，但是如果你正在寻找CSS3，那么你可能已经知道了。可以创建一个SVG蒙版（这很好，因为如果你需要的话，它可以缩放而不会模糊边缘），但是，使用复合形状进行设置会更加困难（正空间中的圆圈然后负空间中的另一个圆圈。）

创建一个PNG图像非常容易，它将像mask那样充当：

.cd {
  background: url('../jpop.jpg') no-repeat;
  -webkit-mask: url('../my_cd_knockout.png') no-repeat;
  mask: url('../my_cd_knockout.png') no-repeat;
}

这是一篇很好的文章，其中包含更多细节： http://coding.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/

Answer 3

http://jsfiddle.net/5CDnw/1/

#cd {
  background: rgb(255,255,255);
  border-radius: 75px;
  width:50px;
  height:50px;        
  position:fixed;
  z-index: 100;
  left: 50px;
  top: 50px;
  border: 1px solid #aaa;
  background: #ebebe9;
}

#cover {
  position:fixed;
  border-radius: 75px;
  width:150px;
  height:150px;
  background: url(http://userserve-ak.last.fm/serve/126/23679395.jpg);   
  border: 1px solid #aaa;

}

Answer 4

这就是我要做的事情（使用没有遮罩的纯CSS）：

屏幕最远层的图像
后来在顶部，使用CSS3圈，同时（因为div是透明的，其余部分是可见的）。我将它垂直和水平放置在中心。
顶部有一个足够大的层，它是另一个CSS3圆，这样它的半径就是从中心到正方形边缘的距离。

这意味着一个圆圈会在原始图像之外传递，但你可以通过在另一个DIV中限制所有这些并使最大的圆圈具有负边距来解决这个问题。

通过CSS3圈子，我正在考虑使用像这样的边界半径：http://www.cvwdesign.com/txp/article/413/making-circles-with-css3-border-radius但是任何一个实现都应该这样做。

Answer 5

好好围绕图像的外部，你可以使用像

这样的东西

将以下CSS属性添加到元素中以使其圆角。

img#CD{
    background: url('../CD.jpg') no-repeat;
    -webkit-mask: url('../hole.png') no-repeat;
     mask: url('../hole.png') no-repeat;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid;
}

要使右下角四舍五入，请使用以下CSS。

img#CD{
     background: url('../CD.jpg') no-repeat;
    -webkit-mask: url('../hole.png') no-repeat;
     mask: url('../hole.png') no-repeat;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border: 1px solid;
}

您当然必须更改像素（px）值以或多或少地对图像进行舍入。

CSS3 - 将背景图像转换为CD

5 个答案: