html - CSS3 - 将背景图片变成 CD

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