Как “обрезать” ту часть изображения, которая является пустой?

#html #img #css

Добрый день друзья! Я пишу сайт с нуля, сейчас закончил рисовать дизайн, но вот возникла
проблема, взгляните на картинку



Красным пунктирным прямоугольником я выделил границы картинки с коленкой девушки,
и всё дело в том, что границы картинки заползают на кнопку и потому в этом месте нажатие
по кнопке невозможно будет сделать. Вопрос : можно ли как-то программно "обрезать"
нижнюю часть картинки и по бокам, дабы пустое место на картинке не являлось его частью
и можно было нажать на кнопку?

У меня уже был вариант - коленку девушки поместить на задний план, а кнопку на передний
и обрезать часть картинки, которую занимает коленка у девушки. Но это на крайняк.
    

Ответы

Ответ 1

Вот вам ещё способ: http://jsfiddle.net/Q3RSR/1/



.navbar-nav {
  margin-top: 0;
  margin-bottom: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-default .navbar-nav > li > a:hover {
  background: yellow;
}
.girl {
  position: relative;
}
.girl img {
  display: block;
}
.gp {
  position: absolute;
  z-index: 16;
}
#gp1 {
  bottom: -2px;
  left: 203px;
}
#gp2 {
  bottom: -4px;
  left: 204px;
}
#gp3 {
  bottom: -6px;
  left: 205px;
}
#gp4 {
  bottom: -8px;
  left: 208px;
}
#gp5 {
  bottom: -10px;
  left: 214px;
}
#gp6 {
  bottom: -12px;
  left: 218px;
}


  
  
  
  
  
  
  


  

    
пункт
    
    
пункт 2
    
    
пункт 3
    
    
пункт 4
    
    
пункт 5
    
  





Он ужасен чуть более, чем полностью :)
Но задачу решает, притом никак не затрагивая саму менюшку.
Кликабельность кнопки при этом плавно обходит коленку.

А менюшку затрагивать не стоит, поскольку её вероятнее всего впоследствии будут редактировать
люди, недостаточно компетентные в разработке сайтов, чтобы прописывать массивы значений
для тэга . Да и даже самому разработчику не придётся этого делать, если пункты меню
изменятся, и расположение кнопки по отношению к картинке изменится. Кроссбраузерность
тоже имеет значение: ширина пунктов меню (а следовательно и положение данного пункта
относительно картинки) может зависеть от шрифтов, которые как минимум в каждой ОС свои.

Порастягивайте вширь окно браузера: положение коленки относительно менюшки будет
меняться, но работать корректно будет при любом положении.


Ответ 2

Вариант А: сделать на кнопке прозрачную область по форме коленки девушки и использовать
z-index.
Вариант Б: скопировать часть коленки девушки на фон кнопки и использовать z-index.
Вариант В: использовать тег