Как сделать счетчик на сайте прозрачным? | PC vlog

Как сделать счетчик на сайте прозрачным?

Как сделать счетчик на сайте прозрачным?

Всем привет! Сегодня при размещении счетчика на сайте столкнулся с таким вопросом:
- Как же при установке счетчика на сайт сделать его прозрачным?

Устанавливал счетчик LiveInternet. При его настройке, конечно можно изменить размер, данные отображения, изменить цвет счетчика и даже можносделать его невидимым, но вот прозрачным сделать его нельзя. Так же как и у других компаний, предоставляющие счетчики, например Яндекс Метрика.

Как сделать счетчик на сайте прозрачным?

Нашел выход из этой ситуации. При помощи стилей можно сделать прозрачным не только счетчик, но и логотип, аттестат WebMoney, да и вообще любую картинку. Вариантов для того, чтоб картинка была прозрачной много, давайте рассмотрим пару таких вариантов:


  • 1 вариант:

Добавить код в файл стилей style.css:

#counter a img
{
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}
#counter a:hover img
{
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}

Далее откройте файл page.php с картинкой или счетчиком который нужно сделать прозрачным и поместите код счетчика в тег <div> :

<div id="counter">ваш код счетчика или картинки</div>

Теперь при наведении на него курсора картинка сменится с прозрачной на полностью видимую, непрозрачную:

Как сделать счетчик на сайте прозрачным?

или так:

Как сделать счетчик на сайте прозрачным?

  • Теперь рассмотрим 2 вариант:

Если не прибегать к использованию стилей css, то можно просто в самом файле page.php вставить тег <style> внутри контейнера <head>. Если у вас уже есть такой тег, то не волнуйтесь, можно задавать более одного тега <style>:

<style type="text/css">
#counter a img
{
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}
#counter a:hover img
{
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
</style>

А счетчик опять же помещаем в тег <div>:

<div id="counter">ваш код счетчика или картинки</div>

Сам я использовал 2 способ. Результат его работы вы можете увидеть в подвале сайта. Счетчики прозрачные, а при наведении на них курсора становятся обычными.


Вам будет это интересно:

Вы можете оставить комментарий, или Трекбэк с вашего сайта.

Комментариев к записи: 1

Веб дизайн студия в Москве. SeowebS - создание и продвижение сайта с 2012 года. Сайты под ключ. Продвижение в топ10.

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