Question

在我的主页上，我有一个用户可以选择的图片幻灯片。我不希望用户完全修改图像。

http://homespun-at-heart.com/是示例，除了当前的方式，用户必须修改图像。

我想要做的是在图像顶部放置一个div，使其看起来像内容区域有一个圆角。

如何在图像顶部放置“圆角”div而不将图像推过来？

Answer 1

你可以通过顶部div上的css3 border-radius属性来实现这一点，但并不是所有浏览器都支持它。对于基于图像的解决方案，例如：

HTML

<div id="container">
  <div id="image"><img src="blah.jpg" /></div>
  <div id="round">
    <img id="topLeftRound" src="leftRound.png" />
    <img id="bottomRightRound" src="rightRound.png" />
  </div>
</div>

CSS

#container{
  position:relative
  }
  #image{
    position:absolute;
    top:0;left:0;
    height:100%;
    z-index:10;
  }
  #round{
    position:absolute;
    top:0;left:0;
    height:100%;
    z-index:20;
    }
    #topLeftRound{
      position:absolute;
      width:10px;height:10px /* or whatever */
      top:0;left:0;
    }
    #bottomRightRound{
      position:absolute;
      width:10px;height:10px /* or whatever */
      bottom:0;right:0;
}

我假设你可以猜到你想要的topLeft和bottomRight图像是什么......只是那个角落的圆角部分。

我认为这就是你要找的东西？

Answer 2

你可以简单地有两个div，一个在另一个里面，两个都有相同的宽度和高度。底部用于实际照片，即它的背景图像将是照片。顶部的背景图像具有透明度，这只是两个圆角：

<div id="slideshow"><div id="slideshow_border"></div></div>

或者（甚至可能更好），你可以将外部div与图像作为背景，然后内部有两个div，一个浮动到左边，一个浮动到右边，每个都有一个单独的透明边框图像。这意味着浏览您网站的人无需下载不必要的额外透明像素。

<div id="slideshow">
 <div class="border left"></div>
 <div class="border right"></div>
</div>

CSS：

#slideshow {
 width: 400px; height: 400px;
 background-image: url(images/slideshow1.png);
}
#slideshow .border {
 width: 50px; height: 50px;
}
#slideshow .border.left {
 float: left;
 background-image: url(images/border-left.gif);
}
#slideshow .border.right {
 float: right;
 margin-top: 350px;
 background-image: url(images/border-right.gif);
}

我只是在CSS中使用了任意值。

Answer 3

您在网站上使用jquery吗？如果你这样做，你可以使用这个插件在dom元素上生成圆角：www.jquery.malsup.com/corner/或者这个：www.dillerdesign.com/experiment/DD_roundies/。两者都很好，并支持包括IE6在内的所有浏览器。要根据需要检测IE6，可以在http://api.jquery.com/jQuery.browser/中使用此插件。

Answer 4

您可以使用CSS3的border-radius属性轻松完成此操作，并且您不需要覆盖div或其他任何内容。它不适用于IE8及更低版本，但它适用于Webkit和Firefox。

#slideshow img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

将div置于另一个之上而不是流动

4 个答案: