CSS3 - 打開背景圖像轉換成CD

使用CSS3和諸如此類的東西，是有辦法，我可以把它變成像一個CD？你知道整個中間（最好是透明的）和圓的邊緣，什麼不是。

2012-06-09 nn2

我不確定一個透明的中間，但這會給你的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; 
}

來源

2012-06-09 23:06:35 nathancahill

我希望它透明的原因是因爲它會在背景顏色之間移動，所以我想成爲一個「真正的」CD。 – nn2

您可以使用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/

來源

2012-06-09 23:06:18 Brian

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; 

}

來源

2012-06-09 23:06:34

這裏就是我想要（使用純CSS不帶口罩）做：

圖片上最遠從屏幕上的圖層
稍後在頂部，使用CSS3圈，這是while（因爲div是透明，其餘部分是可見的）。我會把它垂直和水平居中。
頂部有一個足夠大的圖層，這是另一個CSS3圓，它的半徑是從中心到正方形邊緣的距離。

這將意味着一個圓會傳遞到原始圖像的外部，但是您可以通過將所有這些限制在另一個DIV中並使最大圓具有負邊距來解決此問題。

通過CSS3圈，我在考慮使用像這樣的邊界半徑：http://www.cvwdesign.com/txp/article/413/making-circles-with-css3-border-radius但是任何一個應該做的實現。

來源

2012-06-09 23:07:00 Jay

好圓，你可以使用類似

添加以下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; 
}

您當然必須更改像素（像素）值以四捨五入或多或少。

來源

2012-06-09 23:19:13

CSS3 - 打開背景圖像轉換成CD

回答

相關問題