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

mask您可以使用 CSS3属性来实现该效果。目前它没有很好的浏览器支持，但如果您正在寻找 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-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 圆圈，即 while（因为 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 回答