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

Как сделать картинку прозрачной в css

За управление прозрачностью элемента на странице отвечает стилевое свойство opacity , которое относится к CSS3. В качестве значения применяются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта.

Старые версии Internet Explorer не поддерживает opacity , поэтому для этого браузера следует использовать специфическое свойство filter со значением alpha(Opacity=X) , где под X подразумевается целое число от 0 до 100. Это значение определяет уровень прозрачности: 0 — полная прозрачность; 100 — наоборот, непрозрачность объекта.

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

Пример 1. Полупрозрачное изображение

HTML5 CSS 2.1 CSS3 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Фотография с различными значениями прозрачности

В данном примере вначале приводится исходная фотография, к которой не применяются настройки прозрачности, последующие фотографии отображаются с уровнем непрозрачности 75%, 50% и 25%.

Прозрачность фонового изображения в CSS

opacity – это свойство CSS, которое позволяет настраивать прозрачность элемента. По умолчанию для всех элементов оно имеет значение 1. Приближая это значение к 0, вы можете сделать элемент более прозрачным.

Обычный вариант применения свойства opacity – использование изображения как части фона. Регулировка прозрачности может улучшить читаемость текста или поможет добиться желаемого визуального эффекта. Однако имейте в виду: невозможно менять opacity элемента background-image, не затрагивая при этом его дочерние элементы.

В этом руководстве мы предлагаем два метода обхода этого ограничения для фоновых изображений.

Требования

Чтобы следовать этой статье, вам понадобятся навыки работы с такими вещами:

Метод 1: Изображения и абсолютное позиционирование

Первый подход будет основан на двух элементах (как можно понять из названия). Один из них – «обертка», которая обеспечивает точку отсчета с помощью position: relative. Второй – это элемент img, который появляется за контентом с помощью position: absolute и контекста наложения.

Разметка, написанная с применением этого подхода, может выглядеть так:

Соответствующие CSS-стили будут выглядеть так:

В итоге текст «Hello World!» будет наложен поверх изображения.

Родительский demo-wrap устанавливает блок, содержащий абсолютное позиционирование. Для demo-bg установлено значение position: absolute и присвоено свойство opacity . Для demo-content установлено значение position: relative. Из-за организации разметки он имеет более высокий контекст наложения, чем demo-bg. Также для более точного управления контекстом наложения можно использовать z-index.

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

Метод 2: Псевдоэлементы CSS

Второй подход основан на псевдоэлементах. Псевдоэлементы :before и :after можно использовать для большинства CSS элементов. Как правило, вы предоставляете значение content и используете его для добавления дополнительного текста в начале или в конце. Однако так вы также можете добавить пустую строку, а затем использовать псевдоэлементы для дизайна.

Вот пример разметки для этого подхода:

А вот – ее сопутствующие стили:

Эта разметка и стили выведут фразу «Hello World!» поверх изображения.

Родительский demo-wrap устанавливает блок, содержащий абсолютное позиционирование. Псевдоэлементу :before присвоено position: absolute с небольшой прозрачностью. Он использует background-size: cover, чтобы занять все доступное пространство.

Преимущество этого подхода заключается в поддержке других свойств фона, таких как background-position, background-repeat и background-size. Его недостатком является использование одного из псевдоэлементов, который может конфликтовать с другими эффектами дизайна – например, с clearfix.

Заключение

В этой статье мы рассмотрели два метода обхода ограничения для непрозрачных фоновых изображений.

CSS — opacity

Свойство opacity определяет непрозрачность / прозрачность элемента.

Прозрачное изображение

Свойство opacity может принимать значение от 0.0 — 1.0. Чем меньше значение, тем прозрачнее:

opacity 1
(по умолчаню)

Примечание: IE8 и более раннее использование filter:alpha(opacity=x) . x может принимать значение от 0 до 100 . Чем значение меньше, тем элемент более прозрачный.

Пример

Прозрачный эффект при наведении

Свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении мыши:

Пример

Объяснение примера

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

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

Пример обратного эффекта наведения:

Пример

Прозрачный бокс

При использовании свойство opacity для добавления прозрачности фона элемента, всех его дочерних элементов наследуют ту же прозрачность. Это может затруднить чтение текста внутри прозрачного элемента:

Прозрачность фона на CSS

Если грамотно реализовать на сайте прозрачность фона, страницы будут выглядеть очень эффектно. Важно использовать картинку, а не однотонный цвет. В последнем случае полупрозрачности как таковой не будет, только более блеклый тон.
Существует множество способов реализовать в CSS прозрачность фона. Это и использование PNG изображения, и создание клетчатой картинки, и применение свойства opacity.

Фон из PNG изображения

Сначала необходимо создать полупрозрачный фоновый рисунок в графическом редакторе, а потом сохранить его в формате PNG-24. После этого просто применяем свойство background-image.
Пример кода:

Этот метод плохо работает в InternetExplorer версии 6 и ниже. Чтобы реализовать прозрачность PNG, необходимо воспользоваться специальными скриптами. Этот способ имеет некоторые ограничения:

1. Если в браузере отключить картинки, фоновое изображение пропадет.
2. Если требуется изменить прозрачность фона, придется переделать картинку.
3. Нельзя менять прозрачность методами JS. Также невозможно к такому фону применять анимацию, напрямую изменяющую прозрачность.

Клетчатое изображение

Это очень старый метод, суть которого заключается в создании сетки из прозрачных и непрозрачных пикселей. В результате получится некая имитация полупрозрачного фона. Недостаток способа виден сразу. Аж в глазах рябит, а также ухудшается качество текста. Кроме этого, сохраняются все недостатки прошлого метода.

Свойство opacity

Свойство opacity появилось сравнительно недавно, поэтому старыми версиями браузеров он поддерживается лишь ограниченно, необходимо использовать вендорные префиксы.
Значение свойства колеблется в пределах от 0 до 1. Его характерная особенность – наследование всеми дочерними элементами. При этом уровень их непрозрачности не может быть больше, чем у родителя. Поэтому чисто технически невозможно реализовать ситуацию, когда дочерний элемент непрозрачный, если к родительскому применено свойство.
Синтаксис следующий (пояснения в комментариях).

Свойство filter: alpha(Opacity=70) реализуется для поддержки старых версий InternetExplorer. Для полной совместимости необходимо указывать оба свойства. Плюс этого метода в том, что можно гибко управлять прозрачностью элемента средствами JS или CSS. Например, можно сделать элемент просвечивающимся при наведении с помощью псевдоселектора :hover.

Похожие публикации:

1. Как настроить arduino ide
2. Как обновить node js
3. Куда закидывать спрей в css v34
4. Почему браузер сам меняет css

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

Как можно поменять прозрачность картинки через opacity заданной с помощью background-image не меняя при этом прозрачности всего остального содержимого div ? К примеру:

 
Текст
 
 

Меняя opacity класса «block» естественно будет меняться opacity и заголовка в том числе, но нужно только background-image

Отслеживать
задан 21 мая 2018 в 14:02
75 1 1 золотой знак 3 3 серебряных знака 11 11 бронзовых знаков
покажите ваш код . дальше будет видно
21 мая 2018 в 14:05

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

Такого свойства как background-opacity нет, но есть такая альтернатива: можно заменить background псевдоэлементом, и применить opacity уже к нему.

div < width: 200px; height: 200px; display: block; position: relative; >div::after < content: ""; background: url(http://calculate-this.com/sites/default/files/styles/large/public/field/image/cat-3-icon.png?itok=w4QTmWF4); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; >

Отслеживать
ответ дан 21 мая 2018 в 14:20
86 3 3 бронзовых знака

.block < width:300px; height: 200px; position: relative; background:url(http://on-desktop.com/wps/Nature___Fields_Hilly_landscape_042589_.jpg); >.block2 < position: relative; left:40px; top:-140px; width:300px; height: 200px; z-index:1; >.block2::before < content:""; opacity: 0.5; position: absolute; z-index:-1; top: 0; left: 0; bottom: 0; right: 0; background:url(http://on-desktop.com/wps/Nature___Fields_Hilly_landscape_042589_.jpg); background-size:cover; >

 
foo bar
 
baku reku
 

Отслеживать
ответ дан 21 мая 2018 в 14:16
user245150 user245150
можно же inherit не обязательно указывать url
21 мая 2018 в 14:26

@МаксимЛенский, inherit не будет работать в таком случае. Так как оно наследует свойство от родительского элемента. У block2 нет background , соответственно нечего наследовать.

21 мая 2018 в 14:40
@Arthur смотри мой пример .
21 мая 2018 в 14:40

@МаксимЛенский, ты не понял. block1 & block2 существуют отдельно. В примере Duoxx’a псевдоэлемент у block2 , в котором не может работать наследование.

21 мая 2018 в 14:43
@МаксимЛенский, я про это и говорю=)
21 мая 2018 в 14:45

Если это просто какой-то цвет, то можно задать его с помощью rgba .

 
text
 

А если картинка, то никак. Можно воспользоваться png фоном, либо сделать замену, когда нужно, например если экран стал маленький и нужно сделать фон прозрачным, то можно использовать media и просто подменить на картинку с нужной прозрачностью.

Хотя думаю, что найдутся какие-нибудь костыльные варианты

Отслеживать
ответ дан 21 мая 2018 в 14:13
uzi_no_uzi uzi_no_uzi
2,186 2 2 золотых знака 18 18 серебряных знаков 50 50 бронзовых знаков

Ну как костыль вариант Duoxx с абсолютным позиционированием который пришел мне в голову. Если картинка то я думаю перенести содержимое блока в соседний блок лучшее решение.

21 мая 2018 в 14:21
@Telion, да, я тоже об этом подумал.
21 мая 2018 в 14:22

К примеру, если фон из фото и надо его сделать прозрачным можно поступить этим способом

* < margin: 0; padding: 0; >.item < width: 100vw; height: 100vh; background: url(http://nevseoboi.com.ua/uploads/posts/2012-02/1328215556-496551-0031795_www.nevseoboi.com.ua.jpg); background-size: 0 0; position: relative; padding-top: 20px; >.item:before < content: ""; display: block; width: inherit; height: inherit; position: absolute; top: 0; left: 0; background: inherit; background-size: cover; opacity: .4; >.item p

 
 
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore veniam similique libero adipisci officia unde, est neque harum. Corrupti ut consequatur totam maiores eveniet amet doloremque voluptatibus nostrum eaque nam dignissimos recusandae fuga ab, deleniti quo eligendi, repellat ea fugiat nesciunt reiciendis. Hic deleniti praesentium maxime esse consequuntur ut nesciunt!
 

Полупрозрачный фон

Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.

PNG в качестве фона

В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.

Рис. 1. Изображение для создания фона

После чего добавляем рисунок в качестве фона через свойство background , как показано в примере 1.

Пример 1. Использование полупрозрачного рисунка

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 2. Применение фонового рисунка

Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.

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

Клетчатое изображение

Этот метод относится совсем к древним способам реализации полупрозрачности, когда браузеры «ничего не умели», и приходилось искать нешаблонные решения. Фокус состоит в создании изображения, в котором чередуются прозрачные и непрозрачные пикселы (рис. 3). Такая регулярная структура создает эффект полупрозрачности, по сути его имитируя.

Рис. 3. Увеличенный клетчатый рисунок

Вот как в итоге это выглядит (рис. 4).

Рис. 4. Имитация полупрозрачности

Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.

Свойство opacity

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).

Пример 2. Использование opacity

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Результат примера показан на рис. 5.

Рис. 5. Полупрозрачность текста и фона

В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter . Естественно, оно приводит к невалидному коду CSS.

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

В скобках вместо букв ставится значение компонента цвета, его можно посмотреть в любом графическом редакторе, последнее же значение устанавливает прозрачность и совпадает со значением свойства opacity .

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter , но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Результат примера можно посмотреть на рис. 6.

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

Решается это заменой свойства background-color на background .

Однако здесь есть один нюанс. Валидатор CSS «ругается» на background , если ему задать значение в формате RGBA. Но при этом корректно относится к background-color . В общем, как всегда, приходится выбирать между браузерами и валидностью.

Как сделать полупрозрачный фон на чистом CSS

Для того, чтоб прописать в стилистике CSS сайта, то здесь нужно специально заданный формат под такую палитру оттенка, который будет задаваться в rgba формаций. Где можно задать уже составляющее оттенки цвета, как Red, Green, Blue, где изначально будет прозрачен. Но здесь может быть как сильно прозрачным, так сделать ее намного меньше.

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

Рассмотрим один из примеров полупрозрачного оттенка в алом цвете.

Как пример:

Также можно на CSS

Это уже темно красный оттенок на прозрачном виде.

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

Здесь хочется рассмотреть еще один вариант:

Для того, чтоб выставить или создать прозрачный фон, который построен будет при помощи CSS, то безусловно нужно добавить свойство opacity 0.8, которое может быть 0.5, это менее прозрачен. Когда происходит внесение информации в основной элемент, у которого в наличие есть блоки, то здесь прозрачность будет затрагивать все составляющие страницы, это касается изображение и текста.

Если все рассмотреть подробнее, то не так все сложно, как изначально может показаться.

Для этого возьмем один код:

Здесь нужно, чтобы div с класс limpidity был в прозрачном виде, но при также нужно, чтоб еще один элемент аналогичного свойство не стал аналогичным, здесь здесь все просто, а это идет добавление еще одного div, что идет эквивалентны заданному элементу.

Что после всего получится такой вид:

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

Прозрачность фона CSS

Прозрачность фона на сайте создается через свойста CSS. Добиться прозрачности можо двумя способами: через свойство opacity и background:rgba(). Давайте рассмотрим каждый из них, а далее проведем сравнение.

1. Свойство CSS opacity для прозрачности фона

В CSS есть свойство opacity с помощью которого можно задавать прозрачность изображений, текстов, в том числе и фонов.

Задание прозрачности задается просто указанием вещественного числа от 0.0 до 1.0. Чем меньше число, тем менее заметен будет объект.

Давайте рассмотрим пример со свойством opacity.

Этот код преобразуется на странице в следующее:

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Этот код преобразуется на странице в следующее:

Разница между двумя способами заключается в том, что текст внутри блока становится прозрачным в случае использования opacity. Во втором случае такой проблемы нет. Поэтому нужно смотреть уже по ситуации — что конкретно Вы ждете.

Как сделать прозрачный фон в css

От автора: приветствую вас на страницах блога webformyself. Сегодня я хотел бы вам рассказать, как можно сделать прозрачный фон. Css реализует такой прием очень легко, причем есть несколько вариантов, как это сделать.

Прозрачность в сайтостроении

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

Как реализуется

Собственно, есть два основных варианта, как сделать прозрачный фон. Первый:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Нужному элементу задаем такое правило и все будет работать. Второй вариант:

Цветовой режим rgba является усовершенствованной версией rgb, только тут указывается еще и прозрачность, которую можно задавать в значениях от 1 до 0, где 0 – полностью прозрачный цвет. Таким образом, rgba является отличной возможностью для задания полупрозрачного фона.

Зачем все это нужно?

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

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

По умолчанию у блочного элемента при его создания нет явного фона, он полностью прозрачный. Убедиться в этом легко – создайте на пустой странице блок, определите ему какие-то размеры (ширину и высоту), больше ничего не задавайте. Увидите ли вы что-то на странице? Нет.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Полупрозрачность

Наверняка эта возможность интересует вас намного больше, потому что она позволяет добиваться интересных эффектов. Во-первых, таким образом можно добиться нужных оттенков, более мягких и приглушенных. Например, если записать в качестве цвета что-то вроде этого:

То получим достаточно яркий желтый цвет, что в целом в веб-дизайне не всегда приветствуется. Но если записать уже так:

Мы указали полупрозрачность, так что он стал намного более тусклым.

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

Прозрачный фон может пригодится там, где вы даже не думали. Например, стандартный способ создания треугольника через css заключается в том, чтобы блоку задать нулевую ширину и высоту, после чего указать с трех сторон прозрачные рамки, а с одной стороны выбрать такой цвет, который вам нужен. В итоге получаем треугольник.

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

Похожие публикации:

1. Как сделать обводку текста в html
2. Как сделать ползунок в html
3. Как сделать резервную копию whatsapp
4. Как сделать страницу 404 для сайта html

Прозрачность Windows 10 — как включить, отключить и настроить

В Windows 10 последних версий присутствуют эффекты прозрачности для панели задач и меню «Пуск», а также для некоторых окон, например окна «Параметры». Обычно, они включены по умолчанию, но не всегда. Если вам нужно изменить настройки прозрачности, это можно сделать, хотя система содержит не так много опций для этого.

В этой инструкции подробно о включении и отключении прозрачности Windows 10, и о том, как настроить прозрачность, а точнее — увеличить прозрачность отдельных элементов. Примечание: при отсутствии установленных драйверов видеокарты (когда установлен «Базовый видеоадаптер»), прозрачность работать не будет.

• Как включить и отключить прозрачность Windows 10
• Настройка прозрачности панели задач

Как включить или отключить прозрачность Windows 10

В Windows 10 есть лишь одна встроенная опция, позволяющая включить или отключить прозрачность панели задач, меню «Пуск» и некоторых других элементов:

1. Зайдите в Параметры (можно нажать клавиши Win+I).
2. Перейдите в раздел «Персонализация» — «Цвета».
3. Включите или отключите пункт «Эффекты прозрачности».
4. В результате меню Пуск, панель задач и отдельные окна станут слегка прозрачными, как на скриншоте ниже.

По сути, это всё, что нам доступно для изменения на текущий момент времени. Встроенных средств, чтобы настроить уровень прозрачности, прозрачность для отдельных элементов и что-то ещё пока не предусмотрено. Но есть некоторые возможности, о которых — в следующем разделе руководства.

При желании вы можете изменить этот же параметр с помощью редактора реестра:

1. Нажмите клавиши Win+R, введите regedit и нажмите Enter.
2. Перейдите к разделу реестра

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize

Настройка прозрачности Windows 10 (как увеличить прозрачность панели задач и меню Пуск)

Как уже было отмечено, очевидных методов изменения параметров прозрачности в системе не предусмотрено. Но некоторые скрытые возможности у нас есть.

Первый метод — использование специальной настройки в реестре Windows 10:

В редакторе реестра перейдите к разделу

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced

В правой панели редактора нажмите правой кнопкой мыши и создайте новый параметр DWORD32 (даже для 64-бит систем) с именем UseOLEDTaskbarTransparency

Дважды нажав по этому параметру, задайте значение 1 для него.

Зайдите в параметры персонализации Windows 10, в разделе «Цвета» отключите и снова включите эффекты прозрачности.

В результате прозрачность панели задач увеличится. Не слишком значительно, но заметно, особенно при использовании темной темы оформления.

Если такие полумеры вам не подходят, можно использовать сторонние программы для изменения прозрачности панели задач, среди них:

• TaskbarX — способ сделать панель задач прозрачной и разместить значки по центру
• TranslucentTB — https://github.com/TranslucentTB/TranslucentTB/releases
• TaskbarTools — https://github.com/Elestriel/TaskbarTools/releases

Программы сравнительно простые и каких-то проблем с их использованием возникнуть не должно. TranslucentTB позволяет не просто сделать панель задач полностью прозрачной, но и менять её цвет и прозрачность в зависимости от события: открытия меню Пуск, развертывания окна или открытия поиска.

Параметры как на скриншоте TaskbarTools делают панель задач полностью прозрачной и отключают эффекты размытия для находящегося позади неё изображения. Достаточно попробовать разные опции, чтобы добиться нужного результата. Ниже — пример 100% прозрачности.

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

А вдруг и это будет интересно:

• Лучшие бесплатные программы для Windows
• Некоторые параметры задает системный администратор в параметрах электропитания — как исправить?
• Как удалить Галерею в Windows 11
• Диск разработки в Windows 11
• DISM Ошибка 50 — причины и варианты решения
• PhoneExperienceHost.exe — что это и как отключить?

• Windows 11
• Windows 10
• Android
• Загрузочная флешка
• Лечение вирусов
• Восстановление данных
• Установка с флешки
• Настройка роутера
• Всё про Windows
• В контакте
• Одноклассники

Валерий 14.11.2019 в 14:02

• Dmitry 15.11.2019 в 12:53