it-swarm-ru.tech

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

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

Пример

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

HTML

<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>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

Что я пробовал

Я попытался установить непрозрачность элементов списка на 50%, но затем непрозрачность текста ссылки также составляет 50% - и, похоже, нет способа сбросить непрозрачность дочерних элементов:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

Я также попытался использовать rgba, но это не влияет на фоновое изображение:

#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%;
}
192
jmohr

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

91
2ToneKenobi

Вы можете использовать CSS linear-gradient() с rgba().

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;
}
<div><span>Hello world.</span></div>

55
Stickers

Это будет работать с каждым браузером

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; 
}

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

Проверьте демо на http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

43
Hussein

Если вы используете изображение в качестве маркера, вы можете рассмотреть псевдоэлемент: before.

#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;
}
28
Mr Griever

Вы можете поместить изображение в div: after или div: before и установить непрозрачность для этого «виртуального div»

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

находится здесь http://css-tricks.com/snippets/css/transparent-background-images/

13
Zied Hamdi
#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;
}

Hack с непрозрачностью 0,99 (меньше 1) создает контекст z-index, поэтому вы можете не беспокоиться о глобальных значениях z-index. (Попробуйте удалить его и посмотрите, что произойдет в следующей демонстрации, где родительский упаковщик имеет положительный z-индекс.)
Если ваш элемент уже имеет z-index, то вам не нужен этот хак.

Демонстрация этой техники .

8
user

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

  1. использовать полупрозрачное изображение для фона (гораздо проще).
  2. добавьте дополнительный элемент (например, div) рядом с дочерними элементами, которые вы хотите сделать непрозрачными, добавьте к нему фон и, сделав его полупрозрачным, разместите его позади указанных дочерних элементов.
4
Reyraa

Свойству «filter» требуется целое число в процентах непрозрачности вместо double, чтобы работать в IE7/8.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

П.С .: Я публикую это как ответ, так как для редактирования требуется как минимум 6 измененных символов.

3
lyubeto

Чтобы по-настоящему точно настроить вещи, я рекомендую размещать соответствующие параметры в оболочках, ориентированных на браузер. Это было единственное, что работало для меня, когда я не мог заставить IE7 и IE8 «хорошо играть с другими» (так как в настоящее время я работаю в софтверной компании, которая продолжает их поддерживать).

/* 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);
}

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

2
code-sushi

Просто чтобы добавить к вышесказанному ... вы можете использовать альфа-канал с новыми атрибутами цвета, например. rgba (0,0,0,0) хорошо, так что это черный, но с нулевой непрозрачностью, так что в качестве родителя это не повлияет на ребенка. Это работает только на Chrome, FF, Safari и .... Я худой O.

конвертировать ваши шестнадцатеричные цвета в RGBA

1
Undefined

Я нашел довольно хороший и простой учебник по этой проблеме. Я думаю, что он прекрасно работает (и хотя он поддерживает IE, я просто говорю своим клиентам использовать другие браузеры):

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

Оттуда вы можете добавить поддержку градиента и т.д.

1
Francisco

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

1
Minkiele
#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;
    }

Вы можете попробовать этот код. Я думаю, что это будет работать. Вы можете посетить демо

0
Jakir Hossain

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

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;   
}
0
kaleazy