Как сделать прозрачный блок
Добавил пользователь Евгений Кузнецов Обновлено: 28.09.2024
У блока может быть различный фон, в том числе, прозрачный. В CSS прозрачный фон установлен по умолчанию. То есть, можно видеть то, что находится за блоком, за исключением мест, занятых контентом. Но есть возможность изменить фон блока. Он может иметь любой цвет. Также фоном может быть картинка. В этой теме мы рассмотрим, как это делается.
Цвет фона блока
Свойство background-color устанавливает цвет фона. Значением этого свойства является цвет, указаннный одним из способов, существующих в CSS. Кроме того, оно принимает такие значения:
background-color: transparent - прозрачный фон (по умолчанию)
background-color: inherit - значение принимается от родительского элемента
Значение transparent используется в CSS, когда нужно вернуть прозрачный фон блоку, если ранее он уже был изменён.
Создадим блок, зададим ему размеры и установим цвет фона.
Область заполнения фона
Фон может зополнять разные области блока. Область задаётся с помощью свойства background-clip . Оно принимает следующие значения:
background-clip: border-box - весь блок вместе с рамкой (по умолчанию)
background-clip: padding-box - весь блок без рамки
background-clip: content-box - фон заполняет только область содержимого
При значении border-box заполняются только прозрачные части рамки. Если рамка сплошная и непрозрачная, то за ней фон не отображается.
Добавим на страницу блок, зададим ему рамку и внутренние отступы и установим фон, заполняющий только содержимое блока:
Фон в виде картинки
В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство background-image . Значением этого свойства является путь к файлу картинки. Он указывается так:
background-image: url("путь к файлу");
Для примера можно использовать это изображение. Нажмите на него правой кнопкой мыши и сохраните с именем image. Разместите файл в той же папке, где находится страница. Иначе путь к файлу нужно указывать не так, как в примере.
Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:
Не забывайте, что так устанавливается именно фон блока. На нём можно разместить контент.
Размер фоновой картинки
Свойство background-size устанавливает размеры фоновой картинки. Оно определяет не размер фона, а именно размер изображения. Размеры фона зависят от размеров блока. А свойство background-size влияет на картину, которая становится фоном. Значение свойства можно указать в единицах измерения CSS или процентах. Сначала пишется ширина и через пробел высота. Если не соблюсти пропорции ширины и высоты, то изображение искажается.
Также у свойства background-size есть такие значения:
background-size: auto - если указано только это значение, то изображение имеет свои реальные размеры. Если один из размеров задан в единицах измерения, то второму размеру можно указать auto , чтобы у картинки были правильные пропорции.
background-size: cover - картинка заполняет весь фон, сохраняя пропорции.
background-size: contain - вся картинка отображается в фоне.
Значения cover и contain есть также у свойства object-fit . В теме про него эти значения рассмотрены более подробно.
Укажем размер фоновой картинке:
Позиционирование изображения
В прошлом примере виден левый верхний угол изображения. При этом картинка оказалась обрезанной справа и снизу из-за того, что блок меньше изображения. Существует возможность расположить изображение по-другому, чтобы были видны другие части. Для этого используется позиционирование. Его устанавливает свойство background-position . Значением свойства являются два слова, перечисленных через пробел.
Первое слово - это горизонтальное позиционирование. Значение может быть left , center или right .
Второе слово - это вертикальное позиционирование. Значение может быть top , center или bottom .
Расположим изображение в созданном блоке справа сверху.
Повторение изображения
Добавим на страницу ещё один блок и установим фон в виде того же изображения. Но теперь размеры блока будут намного больше размеров картинки. Пока мы не будем ничего менять, чтобы посмотреть, как выглядит блок. Вы увидите, что изображение повторяется для полного заполнения блока. Добавим блоку рамку, чтобы видеть его размеры.
Чтобы изменить повторение изображения, используется свойство background-repeat . Оно принимает такие значения:
background-repeat: repeat - повторяется по горизонтали и по вертикали (по умолчанию)
background-repeat: repeat-x - повторяется только по горизонтали
background-repeat: repeat-y - повторяется только по вертикали
background-repeat: no-repeat - не повторяется
background-repeat: inherit - значение принимается от родительского элемента
Изменим фон блока так, чтобы изображение не повторялось.
В такой ситуации тоже можно использовать позиционирование изображения. Значением свойства background-position могут быть не только слова, но и два числа в единицах измерения CSS, указанные через пробел. Это отступы изображения от левого верхнего угла блока.
Попробуйте разные способы повторения изображения.
Прокрутка фона
Есть возможность установить, как будет двигаться фон блока при прокрутке страницы, а также при прокрутке самого блока. Это делается с помощью свойства background-attachment . Оно может принимать такие значения:
background-attachment: scroll - фон не движется относительно блока и движется вместе с блоком при прокрутке страницы (по умолчанию)
background-attachment: fixed - фон зафиксирован относительно левого верхнего угла окна браузера
background-attachment: local - фон движется вместе с содержимым при прокрутке блока
Для примера добавим на страницу ещё один блок с фоном в виде изображения. Разместим его в самом начале страницы, то есть этот блок должен находиться выше других. Добавим в него вложенный блок с большой высотой, чтобы появилась прокрутка. Сделаем так, чтобы фон прокручивался вместе с содержимым блока.
Попробуйте установить другие варианты прокрутки фона. Посмотрите, как будет двигаться фон блока.
В этой статье я хотела бы с вами поговорить о таком достаточно интересном эффекте, как прозрачность для различных элементов на сайте, а точнее, как задать с помощью CSS прозрачность фона или любого другого блока на странице сайта.
Навигация по статье:
Приступая к созданию своего сайта, всегда хочется сделать его дизайн интересным и индивидуальным. Существует большое количество специальных эффектов, приемов работы и различных хитростей, используя которые можно достичь желаемого дизайна. Так, в частности используя возможности CSS3 можно добиться действительно впечатляющих результатов.
Благодаря CSS прозрачность фона можно реализовать двумя наиболее простыми способами:
- 1. Используя CSS-свойство opacity.
- 2. Используя формат RGBA для задания фона.
Использование css-свойства opacity
Opacity является универсальным инструментом, и с его помощью вы можете задать желаемый уровень прозрачности в css как для любого элемента на странице, так и для фона.
Синтаксис свойства css:
где значение указывается в диапазоне от 0.0 (элемент полностью прозрачен) до 1.0 (элемент абсолютно не прозрачен).
Итак, для примера сделаем блок с классом fon, и для него зададим, для наглядности, фоновое изображение. В этом блоке разместим два блока с текстом opas1 и opas2, для которых зададим черный фон. После чего для второго блока зададим значение opacity равное 0.3.
Вот что получится:
Как видите, свойство css сработало, блок с классом opas2 стал прозрачным и через него проглядывается фоновое изображение.
Но здесь есть один неприятный момент. Как вы могли заметить, текст потускнел, то есть он тоже стал прозрачным. Это произошло из-за того, что все дочерние элементы блока, в нашем случае – текст, унаследовали прозрачность заданную в css.
Получается, что данное css-свойство мы можем использовать для придания прозрачности блоку на странице только в том случае, если он не содержит никакого текста.
А что же делать, если нам нужно задать в css прозрачность фона для блока, но при этом сохранить читабельность содержащегося в нем текста?
Задание фона в RGBA
Избежать этой проблемы мы сможем в том случае, если откажемся от использования opacity и зададим значение для css-свойства background в формате RGBA.
Формат RGBA дает нам возможность задать значение цвета, используя значение красного, зеленого, а так же синего цветов в десятичном виде, а так же, позволяет задать прозрачность при помощи использования альфа-канала. Уровень альфа-канала задается в интервале от 0 до 1. То есть, так же как и в css-свойстве opacity.
Например так:
background:rgba(255,255,255,0.6);
Для наглядности добавим в блок с фоном еще один элемент с текстом, для которого зададим в css фон в формате RGBA с уровнем прозрачности 0.3.
Я пытаюсь имитировать модальное всплывающее окно во всех HTML и CSS, и мне немного не повезло с одним элементом того, что я делаю. Я хочу, чтобы внутренний div, тот, у которого есть контент, не был непрозрачным, как граница, но независимо от того, что я пытаюсь с CSS, я не могу заставить его работать. Вот код:
я протягиваю руку мой ум на этом закончился. Я никоим образом не гуру HTML или CSS, поэтому объяснение того, почему решение работает, было бы очень признательно.
Обновил Ответ
лучший способ сделать это сейчас-использовать цвета rGBA. Это не будет работать для старых браузеров, но вы можете позволить дизайну изящно деградировать, просто подавая им сплошной цвет. Пример:
в CSS
Оригинальный Ответ
это is раздражает, но CSS этого не позволяет. Установка непрозрачности для одного элемента означает, что ни один дочерний элемент не может иметь большей непрозрачности. (100% от 25% непрозрачность? Право.)
Итак, одно из решений-использовать крошечный прозрачный PNG в качестве повторяющегося фонового изображения, чтобы обойти это. Единственная проблема - IE6, и есть отличный обходной путь под названием supersleight.
(Обновлено. Думаю, суперсвет сработает.)
обновление Вот очень простой пример. Создайте изображение (скажем, PNG с 50% черной заливкой), а затем создайте этот файл-сохраните их в той же папке. Если вы не видите тонкую коробку с прозрачным фоном за "материалом", тогда вы либо не сохраняете файл правильно, либо сохранили изображение где-то еще.
вы также можете сделать это без использования прозрачных изображений. Создайте два отдельных divs и используйте z-index для управления, какой из них находится сверху
PNG обеспечит лучшую совместимость (вы должны использовать оператор filter: для IE6), но лучший способ с помощью CSS3 это просто используйте цвета RGBA (например, фон: rgba (0,0,0,0.5); получите вас черным на 50% alpha), это избавляет от любой унаследованной непрозрачности.
Как насчет использования видимости?
установка цвета родительского div с непрозрачностью с rgba-цветом будет иметь больше смысла здесь, потому что в этом случае дочерний элемент не унаследует непрозрачность и не будет прозрачным!
Как это родительский элемент имеет непрозрачность 0.7, но не наследует его для любого div или изображения или что-либо внутри этого div!
есть много rgba-генераторы там в сети, попробуйте их.
способ, которым я смог поместить прозрачный div за непрозрачный div, состоял в том, чтобы использовать что-то вроде:
Здравствуйте. Где-то месяц назад я опубликовал статью о том, как реализовать прозрачность cредствами css, где я пообещал в следующем посте рассказать как решить проблему прозрачности, когда все дочерние элементы унаследуют прозрачность от родителя и ничего нельзя с этим сделать. Для решения данной проблемы есть два способа.
Первый способ
К сожалению, с этим действительно ничего нельзя сделать, поэтому мы пойдём путём обмана – будем обманывать браузер. А именно, создадим 2 слоя, один рядом с другим. Один из них сделаем прозрачным, а другой заставим отображаться поверх первого, таким образом, они лишь визуально буду выглядеть как вложенные, но на самом деле они не будут являться дочерне-родительскими элементами, а следовательно, прозрачность первого не будет наследоваться ко второму элементу.
HTML код
CSS стили
Второй способ
Этот способ имеет один минус – не все браузеры ещё хорошо поддерживают css3, но зато он позволяет делать фон (и только фон) родительского элемента полупрозрачным, не затрагивая при этом дочерние элементы. Кроме того, для реализации данного способа, вам необходимо будет создать однопиксельную картинку с тем-же цветом и тем же уровнем полу прозрачности.
HTML код
CSS стили
Как видите, способы отличаются как реализацией, так и получаемым результатом. Выбирать особо не из чего, но если найдёте ещё какой-либо способ, то прошу поделиться им в комментариях к данной записи.
Пример работы обоих способов вы можете посмотреть здесь – верхние элементы – это первый способ, а нижние, соответственно, второй .
Надеюсь, что данный пост вам помог. Если есть вопросы – пишите в комментариях – отвечу.
__________________________
Хорошему сайту, для быстрой и нормальной работы необходим хороший хостинг, ну и конечно же без толкового хозяина ему тоже не обойтись 😉
Читайте также: