|

22.04.2013 в 01:46:44 | Добавил: rayven | Просмотров: 1761 | 0 ответов

Всем привет!Сегодня я вам росскажу как сделать вотермарк картинкой на uCoz'e в трех видах:
- Эффект рамки для изображения. Пример
- Водяной знак на изображении. Пример
- Подпись к изображению. Пример

Для начала активируем Допольнительно поле #1.Потом идем в замена стандартных надписей - Добавление в модуль новости - и меняем Дополнительное Поле 1 на URL Изображения.
Эффект рамки для изображения:
Потом идем в вид материалов новостей:
В самый верх вида материалов вставляем,или вставялем в любое место в CSS.

Code
<style>.frame-block {  

position: relative;  

display: block;  

height:335px;  

width: 575px;  

}  

.frame-block span {  

background: url(Ваша рамка.png) no-repeat center top;  

height:335px; - Размеры  

width: 575px; - Размеры  

display: block;  

position: absolute;  

}  
</style>

А потом уже встаялем в вид материалов:

Code
<div class="frame-block">  

<span> </span>  

<img src="$OTHER1$" alt="" />  

</div>

Водяной знак на изображении:
CSS:

Code
<style>.transp-block {  

background: #000 url(Водяной знак.jpg) no-repeat;  

width: 575px;  

height: 335px;  

}  

img.transparent {  

filter:alpha(opacity=75); - Прозачность watermark'a  

opacity:.75;  

}</style>

HTML:

Code
<div class="transp-block">  

<img class="transparent" src="$OTHER1$" alt="" />  

</div>

Подпись к изображению:
CSS:

Code
<style>  
.img-desc {  

position: relative;  

display: block;  

height:335px;  

width: 575px;  

}  

.img-desc cite {  

background: #111;  

filter:alpha(opacity=55);  

opacity:.55;  

color: #fff;  

position: absolute;  

bottom: 0;  

left: 0;  

width: 555px;  

padding: 10px;  

border-top: 1px solid #999;  

}  
</style>

HTML:

Code
<div class="img-desc">  

<img src="$OTHER1$" alt="" />  

<cite>Ваша подпись</cite>  

</div>


1761 визит
↳ 0 ответов
Ваше мнение о материале 0 из 10
Голосовало:

Похожие материалы

avatar
close