Мобильная версияЯ создаю веб-сайт с использованием CSS, HTML и JS.
Я создал круглый элемент div с полем, и у меня есть элемент div, который частично находится внутри поля с абсолютным положением, и я хочу сделать часть, находящуюся внутри поля, прозрачной
Я сделал иллюстрацию, чтобы вы могли ее визуализировать Изображение
черный — видимая часть круга
фиолетовый цвет — это поле для круга
красный — это элемент div, который я хочу сделать частично прозрачным
Я сделал большую часть графики в CSS, но фон — это изображение, которое я хочу, чтобы оно все еще было видимым.
вот код HTML:
СОЦИАЛЬНЫЕ СОЦИАЛЫ! twitter idk idk idk css:
html{ высота: 100%; } @font-face { семейство шрифтов: 'allerbold'; источник: URL('aller_bd-webfont.woff2') формат('woff2'), URL('aller_bd-webfont.woff') format('woff'); шрифт-вес: нормальный; стиль шрифта: нормальный; } тело{ высота: 100%; ширина: 100%; фоновое изображение: линейный градиент (rgba (0, 0, 0, 0,8), rgba (0, 0, 0, 0,1)) , url ('356357.jpg'); фоновый повтор: без повтора; размер фона: обложка; } #круг{ z-индекс: 100; дисплей: гибкий; высота: 66вх; ширина: 66вх; радиус границы: 50%; цвет фона: #E867A0; контур: сплошной белый 6vh; семейство шрифтов: «allerbold», с засечками; оправдание-содержание: центр; выровнять-элементы: по центру; белый цвет; размер шрифта: 13vh; выбор пользователя: нет; позиция: абсолютная; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); переход: преобразование 200 мс; поле: 2vh; } вход{ дисплей: гибкий; z-индекс: 999; непрозрачность: 1; высота: 78вх; ширина: 78вх; радиус границы: 50%; выбор пользователя: нет; граница: сплошная 1 пиксель #ff0000; внешний вид: нет; -webkit-внешний вид: нет; контур: нет; позиция: абсолютная; верхние: 49,6%; слева: 49,8%; трансформировать: транслировать(-50%, -50%); переход: преобразование 200 мс; } ввод: проверено + #круг { трансформировать: транслировать(-31vw, -50%); } ввод: проверено { трансформировать: транслировать(-34vw, -50%); } .socialsLinks{ цвет фона: #E867A0; z-индекс: 98; непрозрачность: 0; высота: 12вх; ширина: 33vw; поле: 2vh; положение: относительное; семейство шрифтов: «allerbold», с засечками; выравнивание текста: по центру; размер шрифта: 8vh; белый цвет; оправдание-содержание: центр; выровнять-элементы: по центру; дисплей: сетка; оправдать себя: центр; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -230%); выбор пользователя: нет; переход: все 150 мс; } js:
let clicks = 1; функция addDay() { constlinks = document.querySelectorAll('.socialsLinks'); если (клики === 1){ for (const bil ссылок) { bil.style.opacity = "1"; bil.style.transform = "перевести(0%, -235%)" } клики += 1; } else if (кликов >= 2){ for (const bil ссылок){ bil.style.opacity = "0"; bil.style.transform = "перевести(-50%, -235%)" } клики -= 1; } } элемент var = document.getElementById('круг'); вар стиль = getComputedStyle (элемент) console.log(стиль); если у вас есть другой лучший способ сделать это, пожалуйста, порекомендуйте его мне
Спасибо за любую помощь!
Я попробовал маску CSS, хотя, возможно, мне просто не удалось понять, как ее использовать. я также пытался найти способы сделать это в js, получая размер поля и пытаясь установить непрозрачность для внутренних элементов div на 0
