Background image прозрачность css: html — Как можно поменять прозрачность background-image не меняя прозрачности остального содержимого блока?

 непрозрачность: значение; 

и используем свойство opacity, чтобы установить непрозрачность этого изображения. Непрозрачность установлена ​​на 0,2, чтобы фон был прозрачным, а текст поверх изображения был хорошо виден.

< html >     < head >      < title >          Как изменить прозрачность фонового изображения          фонового изображения в CSS?      Название > < > # . . . . . 4. 4. 4. 4. . 4. 4. . . . . . . . . . . . . . .              дисплей: гибкий;              align-items: center;              justify-content: center; } #GFG :: До { Содержание: »;»;              позиция: абсолютная;              верх: 0 пикселей;              справа: 0 пикселей;              снизу: 0 пикселей;              слева: 0px; / * Укажите фоновое изображение, которое будет использоваться * / Фоно-изображение: URL ( .              /* Укажите фоновое изображение */              непрозрачность: 0,2;          }      style > head >     < body > < DIV ID = "GFG" > < H3 < H3 < H3 0045 >Background image with opacity h3 >      div > body >     HTML >

Выход:

Связанные статьи

Как снять фон, который появляется на вашем транспарате.

0001

Веб-дизайн

4 марта

Автор: Рэйчел Райзинг

Простое решение, позволяющее избавиться от бледного фона, который появляется на плакатах, открытках, наложениях, коллажах и стопках.

Давайте угадаем. Вы, наверное, уже:

1. Скачали изображение в формате PNG с прозрачным фоном.

2. Загрузил ваше изображение в формате PNG с прозрачным фоном во второй раз, чтобы убедиться, что вы все сделали правильно в первый раз.

3. Думал, можно ли обойтись изображением с бледным фоном, но быстро решил, что твой перфекционизм этого не выдержит.

4. Обратился к Google только для того, чтобы найти множество вопросов по той же проблеме, но без ответа.

Разочаровывает, правда?

К счастью, исправить это намного проще, чем вы думаете. Вот что вам нужно сделать:

1. Сохраните изображение, которое вы используете, как файл PNG с прозрачным фоном.

Довольно очевидно, но очень важно. Если вы не начнете с изображения с прозрачным фоном, мы не сможем изменить его на прозрачный после загрузки.

Как это сделать: Если вы экспортируете изображение из Canva, нажмите «Прозрачный фон» после выбора PNG в качестве типа файла. Если вы используете Photoshop, просто сохраните в формате PNG.

2. Загрузите изображение в Squarespace.

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

То, что вы видите, является наложением изображения, и все, что нам нужно сделать, это отключить его!

3. Отключите наложение изображения, из-за которого ваше изображение имеет фон.

В главном меню на сайте Squarespace нажмите Дизайн , а затем Цвета . Нажмите Тема раздела , а затем выберите тему, которую вы используете в разделе, где вы только что загрузили свою фотографию. Squarespace добавляет небольшой индикатор, который сообщает вам тему раздела для каждого раздела, если вы не уверены.

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

.

Как видите, для наложения изображения выбран цвет, из-за которого наше изображение не выглядит прозрачным.

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