Подписка
Email
Fb
RSS
Twitter
Email

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

полупрозрачность в CSSВсем привет! Сегодня хочу рассказать вам о том, как при помощи CSS сделать фон элемента на странице полупрозрачным. Это очень интересный эффект, который поможет сделать элементы вашей страницы более привлекательтными.

Я считаю, что не стоит рассматривать старые способы, например фон при помощи полупрозрачного изображения в формате PNG. Этот способ, к примеру, неудобен тем, что для смены цвета или величины прозрачности придется переделывать изображение.

Я же хочу рассказать о CSS3 свойстве opacity, которое как-раз задает полупрозрачный фон. Рассмотрим на примере:

  BODY {
        background: url(bg.jpg); /* Фоновый рисунок */
  }
  .opacity {
        margin: 400px 0 0 300px;
        width: 500px;
        background: #036; /* Цвет фона */
        padding: 5px; /* Поля вокруг текста */
        opacity: 0.6; /* Полупрозрачный фон */
        color: #fff; /* Цвет текста */
   }

Результат будет такой:полупрозрачный фон CSS

Значение данного свойства может изменяться от 0 до 1. То есть 1 — это полностью непрозрачный элемент, 0 — полностью прозрачный.

Необходимо помнить о том, что если вы прописываете полупрозрачный фон, то прозрачность будет задаваться и всем дочерним элементам.

Вы можете оставить комментарий.

40 комментариев к записи “Полупрозрачный фон на CSS”

  1. dima:

    Спасибо что написали этот пост! Он кок раз кстати :)Ах да у меня опять вопрос — как на заголовок страницы добавить изображение? Просто если прописывать <img src="« alt=»" /> то этот «набор символов»  выводит на заголовок, а изображение не появляется!!!

  2. dima:

    Простите, я немножко не так написал. Я про тег <title> Заголовок </title>.

  3. Имя:

    Но при этом прозрачность затронет и текст внутри блока. А как сделать только фон полупрозрачным ?

    • Вот так:

      HTML:
      <div id="container">
      <div class="transparency">
      <!-- Это прозрачный блок-->
      </div>
      <div class="content">
      <h1>Текст внутри</h1>
      Текст внутри блока
      </div>
      </div>
      CSS:
      #container {
      padding:20px;
      width:300px;
      color:#fff;
      position:relative;
      float:left;
      margin-left:20px;
      overflow:hidden;
      }
      #container .transparency {
      opacity:0.5;
      background:#036;
      width:300px;
      height:1000px;
      position:absolute;
      z-index:-1;
      .content {
      position:relative;
      }

  4. dima:

    Вот думаю сделать сайт ,а вот не магу выбрать какой язык выбрать XHTML или HTML5. Вот вроде пустяк, а определится какой язык «круче» не могу понять. Подскажите пожалуйста.

    • Если имеете ввиду именно язык, на котором писать код, то нужно определиться, потребуются ли вам на сайте все то, что доступно в HTML5, ведь там есть много новых тегов и семантика лучше. Можно просто поставить доктайп html5, а код использовать старый, за некоторым исключением. Я, например, в последнее время ставлю доктайп HTML5.

  5. dima:

    Спасибо! Кстати я недавно начал читать книгу по HTML5 И в правду больше всего. И для форм и для сайта например <nav>. Но спасибо за совет!!!

  6. Сергей:

    Подскажите пожалуйста. Я сделал сайт. Весь html и css сохранен на компьютере. Какой хостинг выбрать? Может выбрать локальный, чтобы не платить лишних денег? тогда возникают вопросы: как он устроен? Что для этого нужно установить на компьютер? Должен ли он быть постоянно включен? С зарания спасибо! 

    • Андрей:

      Да, тоже интересно! Подскажите, пожалуйста. 

    • Нет, локальный хостинг — это хостинг для экспериментов в основном, он работает только на вашем компьютере. В принципе можно конечно сделать свой хостинг, но для этого нужен очень мощный компьютер и соответствующее программное обеспечение. Этим я вам не советую заниматься. Возьмите лучше для начала дешевый платный хостинг, сейчас даже за 1$ в месяц можно взять. Я могу посоветовать WebHost1, сам его пробовал, нормально работает.

  7. Сергей:

    Спасибо, так и сделаю. А этот сайт тоже этом хостинге сделан? 

  8. Дима:

    Спасибо большое за уроки! Очень интересно, и понятно. Хотелось бы еще научиться php, javascript и mysql...

  9. Андрей:

    А вот возник еще такой вопрос:На каком хостиге, или на каком CMS обычно делают крупные проекты, типа «вконтакте» (vkontakte.ru) или популярные браузерные игры ( ddestiny.ru ).Или они делаются как-то по другому?

  10. AntonFreedom5:

    Добрый день!Скажите пожалуйста, можно ли сделать на wordpress, что бы пользователи могли регестрироваться и добавлять свои новости?например как на этом сайте pro-guest.info/

  11. dima:

    Скажите пожалуйста, а на каком тарифе у вас хостинг. Просто я залез на Yutex и не знаю какой лучше. Жду ответа. Спасибо 

    :)

    :)

    :)

    :)

    :)

    :)

    :)

    :)

    :)

    :) 

    • Я брал «Оптимальный», но тут все зависит от потребности. «Лайт» позволяет только 1 сайт сделать, можно для начала его взять, а потом перейти на другой, если мало будет.

  12. dima:

    спасибо за ответ. У меня с хостингом ещё одна проблема. Посмотрел ещё один и там написано " Внешний (зарубежный) трафик " и крестик. Что это такое. Вроде понема что с другой страны ко мне не залезут, но из информации предоставленой на одном сайте это не то что я думал. Подскожите пожалуйсто. )))))))  

  13. dima:

    Ах да когда будут новые посты? Жду!!!

  14. dima:

    Хостинг на 

    http://sharkeva.com/ а тариф там по-моему только один.

    • dima, там несколько тарифов, но везде зарубежный трафик, т.е. не из 

      Беларуси — платный. К Вам будут заходить только посетители одной страны.

  15. dima:

    А курс по чём?

  16. dima:

    А можете поставить счётчик кто онлайн?

  17. Семён Языков:

    DenWeb, спасибо тебе большое, очень помог :)Счастья тебе :)))

  18. Дима пишет:31 Декабрь 2011 в 17:34Спасибо большое за уроки! Очень интересно, и понятно. Хотелось бы еще научиться php, javascript и mysql...поддерживаю? если знаешь что-нибудь из этих языков с удовльствием бы поизучал, уж очень хорошо подаешь материал, спасибо*оф.топ —  в тебе умирает хороший преподователь*

    • Сейчас я уже отошел от программирования и тому подобного. Больше занимаюсь продвижением и монетизацией сайтов.

  19. Александр:

    Очень вам благодарен за ваши уроки, в данный момент изучаю движок dle. Вы наверно знаете пользуясь этим движком без знаний php не куда, было бы интересно изучать php именно у вас

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

Spam Protection by WP-SpamFree

Яндекс.Метрика