Как сделать фон полупрозрачным в html


Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html



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

Внимание. Всё написано для прямой вставки в таблицу CSS. Если хотите применить эти параметры прямо на страничке, надо использовать данную форму:

<style type="text/css">
ваш стиль {
...
}
</style>

Прописывать её можно прямо перед закрывающим тегом </head>.

Фон.

Частенько при создании сайта нам надо, что бы фон не повторялся. Или повторялся только в одно сторону. Например для выделения меню. Или для экономии трафика, если у вас однотонный фон. Можно просто взять полоску 1 х 300 рх и повторить в одну сторону. И весит мало, значит и страничка будет открываться быстрее. И вид будет, как с использованием полноценного фона. Ниже пример:

В примере я использовал полупрозрачный фон, сделанный в фотошопе (fon.png) - 1 х 100 рх. Весит всего 1 кб. Кстати вес всего фона на моём сайте около 10 кб.

Чтобы не повторялся фон в ячейках:

body {
background-repeat: no-repeat;
}

Повторяется с лева на право:

body {
background-repeat: repeat-x;
}

Повторяется сверху вниз:

body {
background-repeat: repeat-y;
}

Внимание. Для тех, кто не в курсе, или забыл. Скобками {...} - выделяются значения в таблице CSS. Кавычками "..." - прямо в теле документа.

Полупрозрачный фон.

Раз затронул эту тему, то добавлю. Полупрозрачный фон можно сделать и без помощи фотошопа. В этом нам поможет таблица CSS.

Цвет фона - чёрный. Уровень прозрачности - 10%. Если сделаете 100% - это полная непрозрачность.

Полупрозрачность:

ваш стиль {
background-color: #000; / цвет фона /
opacity: 0.10; / уровень прозрачности /
filter: alpha(opacity=10); / уровень прозрачности /
}

Учтите, что полупрозрачным будет всё. Фотографии, текст и т.д. Но только в таблице, или колонке, строчке, к которой вы применили ваш стиль. Можно конечно применить ваш стиль и чисто к изображению. Которое будет служить фоном. И будет просто полупрозрачный фон. Но по моему овчинка выделки не стоит. Полупрозрачность изображения, фотографии легко сделать в фотошопе. И не париться со всей этой ерундой.

На всякий случай объясню, как сделать полупрозрачность в фотошопе. Открываете данной программой изображение, фотографию. Переходим на вкладку - слои, в правой стороне программы. Делаете двойной щелчок по вашему изображению в этой вкладке. Появляется окошко, там и задаёте прозрачность. Можете сделать ещё двойной щелчок. Откроется уже другое окошко, с кучей параметров. И можно начинать экспериментировать, там много всего :) Сохранять готовое изображение, фотографию лучше всего в формате - png.

Кстати, можете изменять не всё изображение, а только нужную его часть. Просто выделите нужный кусок. И щёлкните по нему правой кнопкой мыши. Найдите строчку - скопировать на новый слой. Нажимаете и можете делать с этим куском всё, что душа пожелает. Кроме полупрозрачности, так как под этим слоем будет находиться непрозрачный слой. Но можете сделать основное изображение более прозрачным, а этот кусок мене прозрачным. Наложить пару слоёв градиента и иногда получаются довольно интересные эффекты. Но это уже другая большая и отдельная тема.

Что бы не двигался фон страницы.

Частенько бывает, что мы хотим использовать фотографию вместо фона. Но вот беда, при прокрутке странички, фотография уезжает вверх и начинает повторяться. Этого легко избежать. Фон не будет двигаться не в одну из сторон, просто замрёт на месте. Примеров приводить не буду, места маловато :) Но можете просто посмотреть на фон моего сайта. Он стоит на месте.

Что бы не двигался фон страницы:

body {
background-attachment: fixed;
}

Немного рекламы :)
Источник: http://seozar.ru/sozdanie-raskrutka-sajta/dizajn-sajta/melochi-dizajna/dizajn-fon.php


Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html

Как сделать фон полупрозрачным в html

Похожие записи: