2012-02-14 3 views
0

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

есть ли другой способ сделать это в css? js тоже в порядке.

спасибо.

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

img {margin:0 auto -33px;} 
+1

Почему вы не можете использовать 'position: absolute'? Если вы поместите его в контейнер 'position: relative', он будет абсолютным для этого контейнера. – ThiefMaster

+0

Я сделал то, что вы рекомендовали, он разбивает страницу. – user1099029

+0

Пожалуйста, разместите свое решение как реальный ответ ниже. – BoltClock

ответ

2

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

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

+0

мой сайт похож на 9gag, содержит много изображений, с добавлением более ежедневно, поэтому контейнеры будут иметь разную высоту и ширину, поэтому в моем случае это не сработает – user1099029

+0

Ну, вы можете написать скрипт, который обнаруживает отдельные изображения «высоты и ширины, верно? А потом подсчитайте, сколько нужно скрыть «переполнение: скрытое»? – dangerChihuahua007

+0

ну, я хочу подняться ровно на 100 пикселей снизу для каждого изображения. Я стараюсь избегать использования дополнительного скрипта, потому что он добавит стресс к серверу, у меня всего лишь около 60 мб свободной памяти. – user1099029

0

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

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

См. Например, here.

+0

Да, я знаю, как использовать спрайты, но мой сайт похож на 9gag, содержит много сообщений об изображении, с более добавленным ежедневно, я не могу использовать спрайты в этом случае. – user1099029

+0

Я не говорю об использовании спрайтов. Я говорю, что вы будете использовать ту же технику покрытия части изображения. –