0

このサイズの画像があるとしましょう：

http://userserve-ak.last.fm/serve/126/23679395.jpg

などを使っCSS3て、CDのようにする方法はありますか？全体が中央にあり（できれば透明）、丸いエッジなどがあります。

4

5 に答える 5

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;
}
于 2012-06-09T23:06:35.627 に答える
0

maskCSS3プロパティを使用して、その効果を実現できます。現時点では優れたブラウザー サポートはありませんが、CSS3 を探している場合は、おそらく既にそれを知っているでしょう。SVG マスクを作成することは可能ですが (必要に応じてエッジをぼかすことなく拡大縮小できるので便利です)、複合形状 (正のスペースに円を配置し、次に負の空間の別の円）。

maskあなたのように機能するPNG画像を作成するのは簡単です：

.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-09T23:06:18.883 に答える
0

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-09T23:06:34.953 に答える
0

これが私がすることです（マスクなしで純粋なCSSを使用）：

  1. 画面から一番遠いレイヤーの画像
  2. 後で、CSS3 の円を使用して、それはしばらくの間です (div は透明であるため、残りは表示されます)。これを垂直方向と水平方向の中央に配置します。
  3. 半径が正方形の中心から端までの距離になるように、別の CSS3 円である上部の十分に大きなレイヤー。

これは、円が元の画像の外側を通過することを意味しますが、これをすべて別の DIV 内に制限し、最大の円に負のマージンを設定することで、これを回避できます。

CSS3 サークルでは、次のような境界線の半径を使用することを考えています: http://www.cvwdesign.com/txp/article/413/making-circles-with-css3-border-radius行う。

于 2012-06-09T23:07:00.940 に答える
0

画像の外側を丸めるには、次のようなものを使用できます

次の 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) 値を変更する必要があります。

于 2012-06-09T23:19:13.993 に答える