Как опустить картинку вниз css
Перейти к содержимому

Как опустить картинку вниз css

  • автор:

Как картинку положить вниз?

Прошу подсказать по такому вопросу. Мне необходимо сделать фон из нескольких картинок. Одна из которых должна быть полупрозрачной. вставлял картинку в боди как background-image и давал ей opacity , потом дети наследовали прозрачность. Прописывать каждому элементу дабы он не наследовал это значение не охота(слишком много), в связи с этим решил картинку вставить просто как изображение и дал ему позишин абсолют, чтобы он не мешал другим элементам. По началу понравился такой вариант, но возникла проблемка. Этак картинка влезла как самый верхний слой. То есть она полупрозрачное, всё хорошо-не мешает смотреть, но ссылке как бы оказались под ней-не нажимаются, текст тоже под ней-не выделяется. Подскажите пожалуйста как можно просто положить данную картинку на самый нижний слой?

Отслеживать

задан 23 янв 2012 в 12:43

101 1 1 серебряный знак 9 9 бронзовых знаков

background-position: bottom;

23 янв 2012 в 12:58

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

Опустить объект вниз

Author24 — интернет-сервис помощи студентам

Опустить вниз блок
Здравствуйте, никак не могу сверстать шапку макета. Цитата не "спускается" вниз вот макет а вот.

Опустить вниз фоновый рисунок
Подскажите как опустить фоновый рисунок вниз? задаю я его в css: .t-body

Как опустить текст вниз?
Делаю не большое меню, не могу понять как опустить этот текст(asd) вниз. Чтобы он был под.

Опустить столбец силами css вниз
Есть два блока сверстанных в виде таблицы. Вот пример: ВОТ КОД: <div >

Как опустить картинку относительно текста?

Подскажите, пожалуйста, как можно опустить значок немного вниз, чтобы он был на уровне с текстом?

5cc462d6043da241621170.png

Мой кривой код вот:

 
FE->Viewer->module_live('__header-site',$param); ?>

Производим холодильную технику
в лучших традициях с 1989 года!

Гран-при лучшее предприятие – за высокое качество выпускаемой продукции

Не пинайте сильно. Я не программист

  • Вопрос задан более трёх лет назад
  • 662 просмотра

3 комментария

Простой 3 комментария

flex-wrap

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020 .

Свойство CSS flex-wrap задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.

Интерактивный пример

Начальное значение nowrap
Применяется к flex-контейнеры
Наследуется нет
Обработка значения как указано
Animation type discrete

Подробнее о свойствах и дополнительную информацию смотрите Основные понятия Flexbox.

Синтаксис

flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Глобальные значения */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: revert-layer; flex-wrap: unset; 

Свойство flex-wrap может содержать одно из следующих ниже значений.

Значения

Допускаются следующие значения:

Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction .

Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction и свойство cross-end противоположно cross-start.

Ведёт себя так же, как и wrap , но cross-start и cross-end инвертированы.

Формальный синтаксис

flex-wrap =
nowrap | (en-US)
wrap | (en-US)
wrap-reverse

Примеры

HTML

h4>This is an example for flex-wrap:wraph4> div class="content"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:nowraph4> div class="content1"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:wrap-reverseh4> div class="content2"> div class="red">1div> div class="green">2div> div class="blue">3div> div> 

CSS

/* Common Styles */ .content, .content1, .content2  color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; > .content div, .content1 div, .content2 div  height: 50%; width: 50%; > .red  background: orangered; > .green  background: yellowgreen; > .blue  background: steelblue; > /* Flexbox Styles */ .content  display: flex; flex-wrap: wrap; > .content1  display: flex; flex-wrap: nowrap; > .content2  display: flex; flex-wrap: wrap-reverse; > 

Результат

Спецификации

Specification
CSS Flexible Box Layout Module Level 1
# flex-wrap-property

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *