как показать часть изображения, как на 9gag.com

Question

как показать только часть (в данном случае скрыть водяной знак) изображения, как на 9gag.com, Я пытался использовать клип в CSS, но для этого требуется, чтобы изображение было абсолютным, что для меня нет, нет.

Есть ли другой способ сделать это в CSS? JS тоже хорошо.

спасибо.

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

img {margin:0 auto -33px;}

Answer 1

Да, используйте свойство переполнения CSS.Вы можете сделать overflow: hidden;, чтобы вырезать объекты за пределы ширины и высоты контейнера.

Вы можете узнать больше в W3schools: http://www.w3schools.com/cssref/pr_pos_overflow.asp У них даже есть пример, который вы можете попробовать.

Answer 2

Вам нужен только CSS для этого. Вы будете использовать ту же технику, что и на многих сайтах, чтобы уменьшить количество запросов к ресурсам HTTP (так называемые спрайты).

Вы создаете div, устанавливая изображение в качестве фонового изображения. Затем вы устанавливаете желаемую высоту и ширину div. Если вы не хотите просто отрезать нижнюю правую сторону, вы можете настроить CSS-атрибут background-position.

См. здесь для примера.