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

<p>можно ли установить непрозрачность фонового изображения, не влияя на непрозрачность дочерних элементов?</p><h1>пример</h1><p>все ссылки в нижнем колонтитуле должны иметь собственную маркировку (фоновое изображение), а непрозрачность пользовательской маркировки должна составлять 50%.</p><h2>html</h2><pre><code><div id="footer"> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> <li><a href="#">link 5</a></li> </ul> </div> </code></pre><h2>css</h2><pre><code>#footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; } </code></pre><h1>что я пробовал</h1><p>я попытался установить непрозрачность элементов списка на 50%, но затем непрозрачность текста ссылки также составляет 50% - и, похоже, нет способа сбросить непрозрачность дочерних элементов:</p><pre><code>#footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; /* will also set the opacity of the link text */ opacity: 0.5; } </code></pre><p>я также попытался использовать rgba, но это не влияет на фоновое изображение:</p><pre><code>#footer ul li { /* rgba doesn't apply to the background image */ background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%; } </code></pre>

<p>перенесите изображение в редактор изображений, уменьшите прозрачность, сохраните его в формате .png и используйте вместо этого.</p>

<p>вы можете использовать css <code>linear-gradient()</code> с <code>rgba()</code>.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { width: 300px; height: 200px; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg"); } span { background: black; color: white; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div><span>hello world.</span></div></code></pre> </div> </div> </p>

<p>это будет работать с каждым браузером</p><pre><code>div { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); filter: progid:dximagetransform.microsoft.alpha(opacity=0.5); opacity:.50; } </code></pre><p>если вы не хотите, чтобы прозрачность влияла на весь контейнер и его дочерние элементы, проверьте этот обходной путь. у вас должен быть абсолютно позиционированный ребенок с относительно позиционированным родителем. </p><p>проверьте демо на <a href="http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/">http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/</a> </p>

<p>если вы используете изображение в качестве маркера, вы можете рассмотреть псевдоэлемент: before.</p><pre class="lang-css prettyprint-override"><code>#footer ul li { } #footer ul li:before { content: url(/images/arrow.png); filter:alpha(opacity=50); filter: progid:dximagetransform.microsoft.alpha(opacity=0.5); opacity:.50; } </code></pre>

<p>вы можете поместить изображение в div: after или div: before и установить непрозрачность для этого «виртуального div»</p><pre><code>div:after { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg); opacity: 0.25; } </code></pre><p>находится здесь <a href="http://css-tricks.com/snippets/css/transparent-background-images/">http://css-tricks.com/snippets/css/transparent-background-images/</a> </p>

<pre><code>#footer ul li { position: relative; opacity: 0.99; } #footer ul li::before { content: ""; position: absolute; width: 100%; height: 100%; z-index: -1; background: url(/images/arrow.png) no-repeat 0 50%; opacity: 0.5; } </code></pre><p>hack с непрозрачностью 0,99 (меньше 1) создает контекст z-index, поэтому вы можете не беспокоиться о глобальных значениях z-index. (попробуйте удалить его и посмотрите, что произойдет в следующей демонстрации, где родительский упаковщик имеет положительный z-индекс.)<br> если ваш элемент уже имеет z-index, то вам не нужен этот хак.</p><p> <a href="http://jsfiddle.net/s6y4n/1/">демонстрация этой техники</a> .</p>

<p>к сожалению, на момент написания этого ответа не было <strong>прямого способа</strong> сделать это. вам нужно:</p><ol> <li>использовать полупрозрачное изображение для фона (гораздо проще).</li> <li>добавьте дополнительный элемент (например, div) рядом с дочерними элементами, которые вы хотите сделать непрозрачными, добавьте к нему фон и, сделав его полупрозрачным, разместите его позади указанных дочерних элементов.</li> </ol>

<p>свойству «filter» требуется целое число в процентах непрозрачности вместо double, чтобы работать в ie7/8.</p><pre><code>filter: progid:dximagetransform.microsoft.alpha(opacity=50); </code></pre><p>п.с .: я публикую это как ответ, так как для редактирования требуется как минимум 6 измененных символов.</p>

<p>чтобы по-настоящему точно настроить вещи, я рекомендую размещать соответствующие параметры в оболочках, ориентированных на браузер. это было единственное, что работало для меня, когда я не мог заставить ie7 и ie8 «хорошо играть с другими» (так как в настоящее время я работаю в софтверной компании, которая продолжает их поддерживать).</p><pre class="lang-css prettyprint-override"><code>/* color or background image for all browsers, of course */ #mybackground { background-color:#666; } /* target chrome & safari without disrupting ie7-8 */ @media screen and (-webkit-min-device-pixel-ratio:0) { #mybackground { -khtml-opacity:.50; opacity:.50; } } /* target firefox without disrupting ie */ @-moz-document url-prefix() { #mybackground { -moz-opacity:.50; opacity:0.5; } } /* and ie last so it doesn't blow up */ #mybackground { opacity:.50; filter:alpha(opacity=50); filter: progid:dximagetransform.microsoft.alpha(opacity=0.5); } </code></pre><p>у меня может быть избыточность в приведенном выше коде - если кто-то хочет убрать его дальше, не стесняйтесь!</p>

<p>просто чтобы добавить к вышесказанному ... вы можете использовать альфа-канал с новыми атрибутами цвета, например. rgba (0,0,0,0) хорошо, так что это черный, но с нулевой непрозрачностью, так что в качестве родителя это не повлияет на ребенка. это работает только на chrome, ff, safari и .... я худой o.</p><p>конвертировать ваши шестнадцатеричные цвета в rgba</p>

<p>я нашел довольно хороший и простой учебник по этой проблеме. я думаю, что он прекрасно работает (и хотя он поддерживает ie, я просто говорю своим клиентам использовать другие браузеры):</p><p> <a href="http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/">прозрачность фона css без влияния на дочерние элементы, через rgba и фильтры</a> </p><p>оттуда вы можете добавить поддержку градиента и т.д.</p>

<p>если вам нужно установить непрозрачность только для маркера, почему бы вам не установить альфа-канал непосредственно в изображение? кстати, я не думаю, что есть способ установить непрозрачность фонового изображения через css без изменения непрозрачности всего элемента (и его дочерних элементов тоже).</p>

<pre><code>#footer ul li { position:relative; list-style:none; } #footer ul li:before { background-image: url(imagesfolder/bg\_demo.png); background-repeat:no-repeat; content: ""; top: 5px; left: -10px; bottom: 0; right: 0; position: absolute; z-index: -1; opacity: 0.5; } </code></pre><p>вы можете попробовать этот код. я думаю, что это будет работать. вы можете посетить <a href="http://jsfiddle.net/jakiir/xts832mu/">демо</a> </p>

<p>другим вариантом является <a href="https://css-tricks.com/snippets/css/transparent-background-images/">css tricks</a> подход вставки псевдоэлемента точного размера исходного элемента прямо за ним, чтобы имитировать непрозрачный фоновый эффект, который мы ищем. иногда вам нужно будет установить высоту для псевдоэлемента.</p><pre><code>div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } </code></pre>