it-swarm.com.ru

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

Можно ли, используя только 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 родителя.

2145
Stijn Sanders

Либо используйте полупрозрачное 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>
2202
Georg Schölly

В 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-33IE11IE9IE8

469
Sebastian Markbåge

Это лучшее решение, которое я мог придумать, НЕ с использованием 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
Gorkem Pacaci

Для простого полупрозрачного цвета фона лучше всего подходят вышеуказанные решения (изображения 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. Не используйте противоположное (поля на продолжение или отступы на панели), иначе вы обнаружите странности, такие как страница всегда немного шире, чем окно браузера.
  • Как уже упоминалось, все это должно быть блоком или встроенным блоком. Не стесняйтесь использовать <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>

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

christmas-card-2009.slippyd.com screenshot

58
Slipp D. Thompson

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

Просто откройте Photoshop , создайте пиксельное изображение 2x2 ( выбор 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
Gelens

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

ДЕМО

Результат:

Background opacity with a pseudo element

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

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

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

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

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

Кроме этого,

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

23
Chris

Этот метод позволяет вам иметь изображение на заднем плане, а не только сплошной цвет, и его можно использовать для обеспечения прозрачности других атрибутов, таких как границы. Нет прозрачных изображений 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
frozenkoi

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

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

Иначе это будет невозможно.

Правка:

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

17
SvenFinke

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

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

15
thinsoldier

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

Создайте 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
paris ionescu

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

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

12
joren

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

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

10
philnash

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

10
fearoffours

Если вы 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
suraj rawat

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

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

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

8
Pushp Singh

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

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

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

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

7
Touhid Rahman

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

6
alex

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

Вот пример:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
4
user3968801

Вы можете решить это для 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
Henrik
<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
premgowda

Вы можете использовать RGBA(red, green, blue, alpha) в CSS примерно так:

Так что просто сделайте что-то вроде этого, и это сработает в вашем случае:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
1
Alireza

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

Используйте тень от вставки, как это:

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

Это все :)

1
edd2110

Вы можете сделать с 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
Rudra

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

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

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

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

enter image description here

0
Vinod Kumar

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

.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
Cengkuru Michael