Реализация прозрачного фона для нескольких слоёв изображений

@Shuklin Sergey · Регистрация: 03.05.2013

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

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

Решения чтобы фон пропал, я не нашел.
Появилась идея сделать, чтобы на этот кружок наложить то же самое фото (целиком) города (div с фоткой, у div бордер-радиусами вырезаю кружок и ставлю overflow:hidden, вроде все работает, но фотография города расположена не так как мне надо. Решил позиционировать - данный div абсолют, контейнер, в котором именно сам фон города relative. Соответственно дописываю top и left с нулями и перестает работать оверфлов).

Помогите решить данную проблему или еще какую-то идею подскажите)

@Xteda · 05.04.2015, 16:08

Вот вообще ничего не понял. Примеры кода в студию.

@Shuklin Sergey · 05.04.2015, 16:22 **[ТС]**

Код примерно следующий (пока пробую добавить всего один элемент)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<section class="instruction2">
        <div class="wrapper">
        <ul>Текст<br/>
                <li>
                    <div class="help1">
                    <div class="help2">
                        <img src="img/city2.jpg" alt="">
                    </div></div>
                </li>
                
            </ul>
        </div>
    </section>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.instruction2 {
  height: 595px;
  padding-top: 65px;
  padding-bottom: 50px;
  background: url(../img/city3.jpg) 50% 0 no-repeat;
  position: relative;
}
 
.instruction2 ul {
  font: 300 48px Roboto, sans-serif;
}
 
.instruction2 ul li .help1 {
  height: 152px;
  width: 152px;
  border-radius: 76px;
  border: 5px solid red;
  overflow: hidden;
}
 
.instruction2 ul li .help1 .help2 {
  position: absolute;
  top: 0;
  left: 0;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Shuklin Sergey 6 / 6 / 3 Регистрация: 03.05.2013 Сообщений: 106

	Реализация прозрачного фона для нескольких слоёв изображений 05.04.2015, 16:04. Показов 1545. Ответов 2 Метки нет (Все метки) Есть некое фото (как задний фон - на рисунке это дома), так же на этот фон я накладываю желтый полупрозрачный слой. Далее мне надо вставить несколько рисунков png, причем чтоб вокруг них пропадал данный желтый фон. Решения чтобы фон пропал, я не нашел. Появилась идея сделать, чтобы на этот кружок наложить то же самое фото (целиком) города (div с фоткой, у div бордер-радиусами вырезаю кружок и ставлю overflow:hidden, вроде все работает, но фотография города расположена не так как мне надо. Решил позиционировать - данный div абсолют, контейнер, в котором именно сам фон города relative. Соответственно дописываю top и left с нулями и перестает работать оверфлов). Помогите решить данную проблему или еще какую-то идею подскажите) Миниатюры 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	05.04.2015, 16:08
	Вот вообще ничего не понял. Примеры кода в студию. 0

Реализация прозрачного фона для нескольких слоёв изображений

Решение