28 Вопрос: Как дать тексту или изображению прозрачный фон с помощью CSS?

вопрос создан в Mon, Apr 18, 2016 12:00 AM

Можно ли, используя только CSS, сделать background элемента полупрозрачным, но иметь содержимое (текст и изображения) этого элемента непрозрачным?

Я бы хотел сделать это без текста и фона в виде двух отдельных элементов.

При попытке:

р>

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

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

    
2149
  1. К сожалению, нет, CSS3 планирует исправить это с помощью нового цветового модуля, он позволит вам указывать альфа-значение всякий раз, когда вы указываете цвет. w3.org/TR/css3-color
    2009-04-30 09: 34: 15Z
  2. На самом деле непрозрачность дочерних элементов умножается на непрозрачность родительского элемента, а не переопределяется. Например, если непрозрачность p равна .6, а непрозрачность span равна .5, то истинная непрозрачность текста в диапазоне будет 0.3.
    2012-01-03 04: 05: 48Z
  3. Думаю, что так, но поскольку фон является полупрозрачным, вам даже не нужен фильтр /непрозрачность: codepen.io/anon/pen/ksJug
    2013-11-18 13: 20: 14Z
  4. @ chharvey, что должно произойти, если я определю opacity:.5 для родителя и opacity:2 для дочернего элемента?
    2014-08-04 12: 28: 06Z
  5. @ Александр, я рад, что вы задали этот вопрос. Математически можно было бы предположить, что ребенок вернется к непрозрачности 1. Однако opacity:2; - это неверный CSS . Значение свойства opacity должно находиться в включающем диапазоне [0,1].
    2014-08-05 23: 11: 26Z
28 ответов                              28                         

Либо используйте полупрозрачное PNG изображение, либо используйте CSS3:

background-color:rgba(255,0,0,0.5);

Вот статья из css3.info, Непрозрачность, RGBA и компромисс (2007-06-03).

р>

<p style="background-color:rgba(255,0,0,0.5);">
  <span>Hello world</span>
</p>
    
2205
2019-06-10 09: 49: 02Z
  1. возможно ли это сделать с помощью шестнадцатеричных цветов? Нравится #fff?
    2011-07-13 22: 32: 03Z
  2. 2011-08-12 14: 19: 43Z
  3. @ grm: W3C рассмотрел вопрос о введении формата шестнадцатеричного кода #RRGGBBAA, но они решили этого не делать (по разным причинам), поэтому мы не можем.
    2012-12-15 06: 59: 02Z
  4. @ grm с SASS Вы можете, background-color: rgba(#000, .5);
    2013-05-30 00: 34: 22Z
  5. @ outis: Хорошие новости, # RRGGBBAA теперь на уровне цвета 4 .
    2015-02-26 19: 01: 50Z

В Firefox 3 и Safari 3 вы можете использовать RGBA, например: Георг Шолли упоминал .

Мало известная хитрость заключается в том, что вы можете использовать его и в Internet Explorer, используя фильтр градиента.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Первое шестнадцатеричное число определяет альфа-значение цвета.

Полное решение для всех браузеров:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

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

Снимки экрана с подтверждением результатов:

Это при использовании следующего кода:            

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11  IE9  IE8

    
469
2017-05-23 11: 54: 59Z
  1. Но не в IE8. Я попробовал новый синтаксис -ms-фильтра, но он все еще не работал для меня: (
    2009-11-11 18: 16: 27Z
  2. @ philfreo: для меня это хорошо работало в IE8.
    2010-04-30 07: 24: 10Z
  3. В этом посте показано, как это сделать в IE8: robertnyman.com/2010/01/11/…
    2010-08-20 14: 20: 05Z
  4. @ philfreo: Если вы измените первый бит кода Себастьяна на "background: rgb (0, 0, 0) transparent;" теперь он должен работать в IE8. Это давало мне покои довольно долго!
    2011-02-07 23: 10: 21Z
  5. @ AdrienBe - я отредактировал ваш ответ в соответствии с вашими инструкциями. К сожалению, я уже давно вышел за рамки этого конкретного вопроса и поэтому не могу сейчас добавить этот разговор.
    2014-02-27 19: 41: 13Z

Это лучшее решение, которое я мог придумать, не используя CSS 3. Насколько я понимаю, оно отлично работает в Firefox, Chrome и Internet Explorer.

Поместите контейнер DIV и два дочерних DIV на один уровень, один для контента, один для фона. А используя CSS, автоматически изменяйте размер фона в соответствии с содержимым и помещайте фон на задний план, используя z-index.

р>

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>
    
103
2019-06-10 11: 45: 41Z
  1. Он сказал: «Не разделяя текст и фон на два элемента, расположенных друг над другом». В любом случае, это хорошее исправление и полезно, но в некоторых случаях вы бы хотели, чтобы непрозрачный элемент был дочерним по отношению к полупрозрачному.
    2010-12-19 17: 24: 54Z
  2. Я ответил примерно так же на другой вопрос SO, но добавил jsfiddle & доказательства скриншотов (IE7 +), см. здесь, если вы заинтересованы stackoverflow.com/a/21984546/759452
    2014-02-25 17: 40: 51Z
  3. @ Gorkem Pacaci: убедитесь, что свойства прозрачности "действительно" являются кросс-браузерными, вы можете использовать этот фрагмент кода из CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
    2014-02-27 13: 40: 54Z
  4. Почему бы не сделать это с псевдоэлементом, например :after, и избежать лишней разметки?
    2016-12-06 09: 07: 36Z

Для простого полупрозрачного цвета фона лучше всего подходят вышеуказанные решения (изображения CSS3 или bg). Однако, если вы хотите сделать что-то более изощренное (например, анимацию, несколько фонов и т. Д.) Или если вы не хотите полагаться на CSS3, вы можете попробовать «технику панели»:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

Техника работает с использованием двух «слоев» внутри элемента внешней панели:

  • один («назад»), который соответствует размеру элемента панели, не влияя на поток контента,
  • и один («продолжение»), который содержит содержимое и помогает определить размер панели.

Важно position: relative на панели; он говорит заднему слою соответствовать размеру панели. (Если вам необходимо, чтобы тег <p> был абсолютным, измените панель с <p> на <span> и оберните все это в тег абсолютно позиции <p>.)

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

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

Один из вариантов, позволяющих регулировать фоновую вставку (с помощью верхнего /нижнего /левого /правого) и /или закрепления фона (путем удаления одной из пар левый /правый или верхний /нижний), - использовать вместо этого следующий CSS: р>

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Как написано, это работает в Firefox, Safari, Chrome, IE8 + и Opera, хотя IE7 и IE6 требуют дополнительного CSS и выражений, IIRC, и в последний раз, когда я проверял, второй вариант CSS не работает в Opera. р>

На что нужно обратить внимание:

  • Плавающие элементы внутри Cont-слоя не будут содержаться. Вам нужно убедиться, что они очищены или иным образом содержатся, или они выскальзывают из нижней части.
  • Поля идут на элементе панели, а отступы - на элементе cont. Не используйте противоположное (поля на продолжение или отступы на панели), иначе вы обнаружите странности, такие как страница всегда немного шире, чем окно браузера.
  • Как уже упоминалось, все это должно быть блоком или встроенным блоком. Не стесняйтесь использовать <div>s вместо <span>s для упрощения CSS.

Более полная демонстрация, демонстрирующая гибкость этого метода при использовании его в тандеме с display: inline-block, а также с auto & определенный widths /min-heights:

р>

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

А вот живая демонстрация широко используемой техники:

    
58
2019-06-10 14: 29: 54Z
  1. В какой ситуации не стоит использовать CSS3 для этого?
    2015-06-14 02: 23: 45Z
  2. @ Burkely91 Если вы можете сделать это в CSS3, то обязательно используйте это. Но CSS3 фон не поддерживает все типы контента и гибкость полного макета. Приведенный выше пример конверта /буквы будет трудно осуществить с помощью CSS3 из-за независимо повторяющихся краев и заполнения по центру. Также имейте в виду, что этот ответ был изначально написан 5 лет назад, до того, как была широко распространена поддержка CSS3.
    2016-01-04 10: 17: 38Z
  3. @ Игорь Иванча Откатил ваши изменения. Извините, изменение отступа с моей предпочтительной формы (вкладки) на вашу (2 пробела) не круто. Возможно, у вас есть веская причина использовать отступы в два пробела в ваших повседневных проектах, но для презентации в Интернете я считаю, что вкладки имеют явный выигрыш - более глубокие отступы облегчают распознавание уровней иерархии, и это далеко проще надежно преобразовывать вкладки в пробелы, и поэтому это более совместимая форма для всех читателей.
    2016-02-06 11: 07: 05Z
  4. @ Игорь Иванча Кроме того, похоже, что вы запустили код, хотя beautifier, который помещает каждый селектор и свойство CSS в свою собственную строку. Мои примеры были написаны с преднамеренным разрывом строк и интервалами, чтобы логически сгруппировать фрагменты, которые должны быть понятны читателю - например, большинство width: & Свойства height: имеют общую линию, поскольку они представляют собой один и тот же тип конструкции и лучше понимаются как двумерная фигура, а не как пара одномерных ограничений. Кроме того, некоторые строки содержат в себе достаточное количество, потому что это повторяющийся контент, который не так важен, чтобы его показывать.
    2016-02-06 11: 11: 37Z
  5. @ Игорь Иванча Логическая организация, группировка и стилизация чрезвычайно важны для написания разумного, понятного кода, как и для всех видов написания. Изменения, которые вы внесли, были равносильны тому, что вы отправили кому-то сообщение, удалили все разрывы абзаца и поставили принудительный перевод новой строки после каждого предложения. Если вы хотите быть таким тупым педантиком в своей работе, хорошо, вы можете это сделать. Но, пожалуйста, не останавливайте семантический характер и выражение в работе других людей.
    2016-02-06 11: 15: 48Z

Лучше использовать полупрозрачный .png .

Просто откройте Photoshop , создайте пиксельное изображение 2x2 (picking 1x1 может вызвать ошибку Internet Explorer! ), заполните ее зеленым цветом и установите непрозрачность на вкладке «Слои» до 60%. Затем сохраните его и сделайте его фоновым изображением:

<p style="background: url(green.png);">any text</p>

Конечно, он работает отлично, за исключением прекрасного Internet Explorer 6 . Доступны лучшие исправления, но вот быстрый взлом:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
    
56
2017-05-23 12: 10: 41Z
  1. Вы также можете использовать paint.net . DIV>
    2012-01-06 20: 53: 25Z

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

    DEMO

    Вывод:

    Непрозрачность фона с псевдоэлементом

    Соответствующий код:

    р>

    p {
      position: relative;
    }
    p:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      opacity: .6;
      z-index: -1;
    }
    /*** The following is just for demo styles  ***/
    
    body {
      background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
      background-size: cover;
    }
    p {
      width: 50%;
      padding: 1em;
      margin: 10% auto;
      font-family: arial, serif;
      color: #000;
    }
    img {
      display: block;
      max-width: 90%;
      margin: .6em auto;
    }
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
      <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
    </p>

    Браузер поддерживает Internet Explorer 8 и более поздние версии.

    52
    2016-04-11 18: 59: 43Z

    Самый простой способ - использовать полупрозрачный фон PNG-изображение .

    Вы можете использовать JavaScript, чтобы он работал в Internet Explorer 6, если вам нужно.

    Я использую метод, описанный в прозрачных PNG в Internet Explorer 6 .

    Кроме этого,

    вы можете подделать его, используя two side-by-side sibling elements - сделайте один полупрозрачный , а затем absolutely position the other over the top?

        
    23
    2014-10-05 07: 23: 59Z
    1. Все, что мне нужно, это простой цвет фона, какой размер PNG вы бы предложили мне создать с этим цветом? 1x1 заставит рендеринг выполнять большую работу, слишком много пикселей делает этот PNG довольно большим (размер файла должен быть нормальным, так как он сжат, но все равно рендеринг должен распаковывать, чтобы использовать его) ...
      2009-04-30 12: 51: 07Z
    2. Я бы порекомендовал что-то вроде 30px x 30px, которое использует меньше памяти при рендеринге, чем 1x1, и все еще достаточно мало, чтобы минимизировать использование полосы пропускания.
      2009-04-30 14: 27: 15Z

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

    Используйте :before (или :after) в CSS и присвойте им значение непрозрачности, чтобы оставить элемент с исходной непрозрачностью. Таким образом, вы можете использовать: before, чтобы создать искусственный элемент и дать ему прозрачный фон (или границы), который вы хотите, и переместить его за контент, который вы хотите сохранить непрозрачным, с z-index.

    Пример ( fiddle ) (обратите внимание, что DIV с классом dad просто для предоставления некоторого контекста и в отличие от цветов, этот дополнительный элемент на самом деле не нужен, и красный прямоугольник перемещается немного вниз и вправо, чтобы оставить видимым фон позади элемента fancyBg):

    <div class="dad">
        <div class="fancyBg">
            Test text that should have solid text color lets see if we can manage it without extra elements
        </div>
    </div>
    

    с этим CSS:

    .dad {
        background: lime; border: 1px double black; margin: 1ex 2ex;
        padding: 0.5ex; position: relative; -k-z-index: 5;
    }
    .fancyBg {
        border: 1px dashed black; position: relative; color: white; font-weight: bold;
        z-index: 0; /*background: black;*/
    }
    .fancyBg:before {content:'-'; display: block;
        position: absolute; background: red; opacity: .5;
        top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
        /*top: 0; right: 0; bottom: 0; left: 0;*/
        z-index: -1;
    }
    

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

        
    21
    2016-02-06 11: 17: 21Z

    Проблема в том, что в вашем примере текст на самом деле имеет полную прозрачность. Он имеет полную непрозрачность внутри тега p, но тег p просто полупрозрачен.

    Вы можете добавить полупрозрачное фоновое изображение PNG вместо реализации его в CSS или отдельнотекст и разделить на 2 элемента и переместить текст над полем (например, отрицательное поле).

    В противном случае это будет невозможно.

    EDIT:

    Точно так же, как упоминал Крис: если вы используете PNG-файл с прозрачностью, вы должны использовать обходной путь JavaScript, чтобы заставить его работать в надоедливом Internet Explorer ...

        
    17
    2011-05-25 11: 14: 45Z

    Почти во всех этих ответах предполагается, что дизайнеру нужен сплошной цвет фона. Если дизайнер на самом деле хочет фотографию в качестве фона, единственным реальным решением на данный момент является JavaScript, такой как плагин jQuery Transify упомянуто в другом месте .

    Нам нужно присоединиться к обсуждению в рабочей группе CSS и заставить их дать нам атрибут background-opacity! Он должен работать рука об руку с функцией нескольких фонов.

        
    15
    2017-05-23 12: 26: 38Z

    Вот как я это делаю (это может быть неоптимально, но это работает):

    Создайте div, который вы хотите сделать полупрозрачным. Дайте ему класс /идентификатор. Оставьте его пустым и закройте его. Дайте ему заданную высоту и ширину (скажем, 300 на 300 пикселей). Дайте ему непрозрачность 0,5 или что вам нравится, и цвет фона.

    Затем, ПРЯМО ПОД НИЖЕ этого div, создайте еще один div с другим классом /id. Создайте абзац внутри, где вы разместите свой текст. Задайте позицию div: относительную и верхнюю: -295px (это ОТРИЦАТЕЛЬНЫЙ 295 пикселей). Дайте ему z-индекс 2 для хорошей меры и убедитесь, что его непрозрачность равна 1. Создайте абзац по своему усмотрению, но убедитесь, что размеры меньше, чем у первого div, чтобы он не переполнялся.

    Вот и все. Вот код:

    р>

    .trans {
      opacity: 0.5;
      height: 300px;
      width: 300px;
      background-color: orange;
    }
    .trans2 {
      opacity: 1;
      position: relative;
      top: -295px;
    }
    .trans2 p {
      width: 295px;
      color: black;
      font-weight: bold;
    }
    <body>
      <div class="trans">
      </div>
      <div class="trans2">
        <p>
          text text text
        </p>
      </div>
    </body>

    Это работает в Safari 2.x, я не знаю о Internet Explorer.

        
    13
    2015-03-30 19: 04: 39Z
    1. Можно избежать лишнего элемента и использовать вместо него псевдоэлемент, например :before или :after
      2013-11-03 07: 03: 45Z

    Вот плагин jQuery, который будет обрабатывать все для вас, Transify ( Transify - плагин jQuery для простого применения прозрачности /непрозрачности к фону элемента ).

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

        
    12
    2011-05-25 11: 28: 36Z

    Непрозрачность фона, но не текста есть некоторые идеи. Либо используйте полупрозрачное изображение, либо наложите дополнительный элемент.

        
    10
    2017-05-23 10: 31: 36Z

    Некоторое время назад я писал об этом в Кросс-браузерная прозрачность фона с помощью CSS .

    Причудливый Internet Explorer 6 позволит вам сделать фон прозрачным и сохранить текст поверх полностью непрозрачным. Для других браузеров я предлагаю использовать прозрачный файл PNG.

        
    10
    2011-05-25 11: 17: 40Z

    Если вы Photoshop парень, вы также можете использовать:

     #some-element {
      background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
     }
    

    Или:

    #some-element {
      background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
    }
    
        
    9
    2016-04-11 18: 55: 46Z

    Чтобы сделать фон элемента полупрозрачным, но при этом содержимое (текст и изображения) этого элемента непрозрачным. Вам нужно написать код CSS для этого изображения и добавить один атрибут с именем opacity с минимальным значением. например.

    .image{
       position: relative;
       background-color: cyan;
      opacity: 0.7;
    }
    

    //чем меньше значение, тем прозрачнее, либо меньше - прозрачностью.

        
    8
    2016-06-03 12: 09: 42Z
    1. Это один из способов сделать это в современных браузерах. Я комбинирую это со значениями rgba как запасной вариант
      2016-07-14 14: 57: 19Z
    2. Да, правильно. Это один из способов справиться с современным браузером.
      2016-07-21 13: 05: 07Z

    background-color: rgba (255,0,0,0.5); как упомянуто выше, это лучший ответ. Сказать, что использовать CSS3, даже в 2013 году, непросто, поскольку уровень поддержки различных браузеров меняется с каждой итерацией.

    Хотя background-color поддерживается всеми основными браузерами (не новы для CSS3) [1], прозрачность альфа может быть непростой задачей, особенно с Internet Explorer до версии 9 и с цветом рамки в Safari до версии 5.1. [2] р>

    Используя что-то вроде Compass или SASS может реально помочь в производстве и кроссплатформенной совместимости.

    [1] W3Schools: свойство CSS background-color

    [2] Блог Нормана: Контрольный список поддержки браузера CSS3 (октябрь 2012 г.) р>     

    7
    2013-01-08 20: 00: 39Z

    У CSS3 есть простое решение вашей проблемы. Использование:

    background-color:rgba(0,255,0,0.5);
    

    Здесь rgba означает красный, зеленый, синий и альфа-значение. Значение зеленого получается из-за 255, а полупрозрачность получается из альфа-значения 0,5.

        
    7
    2013-05-20 23: 36: 50Z

    Если вы используете Меньше , вы можете использовать fade(color, 30%). р>     

    6
    2016-04-11 19: 01: 24Z

    Вы можете решить это за Internet Explorer 8 с помощью (ab) с использованием синтаксиса градиента. Цветовой формат - ARGB. Если вы используете Препроцессор Sass вы можете конвертировать цвета с помощью встроенной функции "ie-hex-str () ».

    background: rgba(0,0,0, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
    
        
    4
    2016-04-11 18: 54: 35Z

    Вы можете использовать чистый CSS 3 : rgba(red, green, blue, alpha), где alpha - это уровень прозрачности ты хочешь. Нет необходимости в JavaScript или jQuery.

    Вот пример:

    #item-you-want-to-style{
        background:rgba(192.233, 33, 0.5)
    }
    
        
    4
    2016-04-11 18: 57: 20Z
    <div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
        <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
    </div>
    

    http://jsfiddle.net/x2ukko7u/?

        
    3
    2014-11-18 11: 05: 59Z

    Существует более простое решение - наложить оверлей поверх изображения на тот же элемент div. Это не правильное использование этого инструмента. Но работает как обаяние, чтобы сделать это наложение с использованием CSS.

    Используйте теневую вставку следующим образом:

    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
    

    Вот и все :)

        
    1
    2016-04-11 19: 00: 31Z

    Вы можете использовать RGBA (red, green, blue, alpha) в CSS , что-то вроде этого:

    Просто сделайте что-нибудь подобное, и это сработает в вашем случае:

    p {
      position: absolute;
      background-color: rgba(0, 255, 0, 0.6);
    }
    
    span {
      color: white;
    }
    
        
    1
    2017-10-20 02: 41: 59Z
      

    Вы можете сделать с rgba color code, используя css, как показано в примере ниже.

    р>

    .imgbox img{
      height:100px;
      width:200px;
      position:relative;
    }
    .overlay{
      background:rgba(74, 19, 61, 0.4);
      color:#fff;
      text-shadow:0px 2px 5px #000079;
      height:100px;
      width:300px;
      position:absolute;
      top:10%;
      left:25%;
      padding:25px;
    }
    <div class"imgbox">
    <img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
      <div class="overlay">
        <p>This is Simple Text.</p>
      </div>
    </div>
        
    1
    2018-05-22 06: 10: 43Z

    Обычно я использую этот класс для своей работы. Это довольно хорошо.

    р>

    .transparent {
      filter: alpha(opacity=50); /* internet explorer */
      -khtml-opacity: 0.5;      /* khtml, old safari */
      -moz-opacity: 0.5;       /* mozilla, netscape */
      opacity: 0.5;           /* fx, safari, opera */
    }
        
    0
    2017-02-11 08: 00: 03Z

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

    background-color: rgba(71,158,0,0.8);
    

    Используйте цвет фона с непрозрачностью

    фонового цвета: RGBA (R, G, В, Непрозрачность); р>

     введите описание изображения здесь

        
    0
    2018-12-12 07: 29: 47Z

    Вы можете использовать цвет RGB с непрозрачностью, например, tего цветовой код в RGB (63 245,0) и добавить непрозрачность, как (63 245,0,0,5), а также добавить RGBA заменить RGB. Использование для непрозрачности

    р>

    div{
      background:rgba(63,245,0,0.5);
      }
        
    - 2
    2016-12-29 09: 40: 00Z
источник размещен Вот