Поместите div поверх другого и не обтекайте

Question

На моей домашней странице у меня есть слайд-шоу из фотографий, которые могут быть выбраны пользователем. Я не хочу, чтобы пользователь вообще должен был изменять изображение.

http://homespun -at-heart.com / - это пример, за исключением того, что в настоящее время пользователь должен изменить изображение.

То, что я хотел бы сделать, это иметь div, который наслоен на верхнюю часть изображения, чтобы он выглядел так, как будто область содержимого имеет круглый угол.

Как мне расположить мой "круглый угол" div на верхней части изображения, чтобы оно не сдвигало изображение поверх?

Answer 1

хорошо, вы могли бы добиться этого с помощью свойства border-radius css3 в div сверху, но это поддерживается не во всех браузерах. Для решения на основе изображения, что-то вроде:

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

Вы можете сделать это очень легко с помощью свойства border-radius CSS3, и вам не нужно наложение div или что-то еще. Он не будет работать в IE8 и ниже, но работает в Webkit и Firefox.

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

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

Вы можете просто иметь два элемента div, один внутри другого, одинаковой ширины и высоты. Нижний используется для фактической фотографии, то есть его фоновым изображением будет фотография. А в верхнем - фоновое изображение с прозрачностью, которая состоит из двух закругленных углов:

<div id="slideshow"><div id="slideshow_border"></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.