SEO форум SEO форум
Форум о создании, продвижении и оптимизации сайтов, рекламе, хостинге, растровой и векторной графики, программировании, о компьютерах и android устройствах Главная станица Главная страница сайта   Бесплатная доска объявлений Бесплатная доска объявлений   Поиск Поиск   Участники Участники

Узнайте еще больше о возможностях Paint.net в нашей группе в VK "Уроки по paint.net"
Сегодня: 27.07.2024 - 07:03:11
Страницы:  1  
SEO форум » Уроки по CSS » Создание водяного знака с помощью CSS
АвторСообщение

ADMIN

участник форума





Статистика:
Тем создано: 103
Сообщений: 2235
Репутация: 9727 ±
Нарушения: 0
И так для чего нужен водяной знак? Для того чтобы защитить ваши графические файлы от копирования и размещения на чужом сайте. Вернее скопировать и разместить можно, но с вашей подписью или логотипом. Сделать его можно несколькими способами, с помощью графических редакторов, PHP или как в данном случае с помощью CSS. (Другие варианты с помощью Paint.net и PHP опишу чуть позже)

И так начнем.
Для этого нам нужно само изображение.



sampl.jpg - это название моего изображения, вам надо изменить на свой.

И сам водяной знак, точнее его изображение.



watermark.jpg - это название моего файла с водяным знаком, вы можете назвать его как вам удобно и сделать удобный вам размер. Вместо текста может быть ваш логотип. Главное не забыть поменять на нужные названия в коде который ниже.


    Код:
    <style>
    .block {
    background: #000 url(watermark.jpg) no-repeat;
    width: 574px;
    height: 334px;
    }
    img.watermark {
    filter:alpha(opacity=75);
    opacity:.75;
    }
    </style>
    <div class="block"><img class="watermark" src="sampl.jpg" alt="" /></div>


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

Пример полученного результата смотрим тут http://good-surf.ru/forum/urok/css/watermark/watermark.html.
Сообщение # 1 10.03.14 - 13:04:16

AmateR



гость
Какая же это защита - наложение текста сверху на изображение? При сохранении изображения ни какого водяного знака не будет...
Сообщение # 2 13.10.17 - 09:28:31

ADMIN

участник форума





Статистика:
Тем создано: 103
Сообщений: 2235
Репутация: 9727 ±
Нарушения: 0
AmateR, надо будет доработать скрипт.
Сообщение # 3 13.10.17 - 09:58:26
SEO форум » Уроки по CSS » Создание водяного знака с помощью CSS
Следующая тема: Подпись изображения с помощью CSS
Страницы:  1  

Сообщение
Имя E-mail
Сообщение

Нажмите на точку возле имени, чтобы вставить обращение к участнику в сообщение

Смайлы:
Ещё смайлы
         
Защитный код: (введите цифры, которые на синем фоне)
Ответ на вопрос: (Какой сейчас год?)
     

Powered by good-surf.ru
Спасибо за поддержку форума.