Страницы

Поиск по вопросам

понедельник, 10 декабря 2018 г.

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

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

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


Ответ

Вот вам ещё способ: 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; }


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

Комментариев нет:

Отправить комментарий