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

avatar
Stijn Sanders
30 апреля 2009 в 09:00
1547600
33
2396

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

Источник
meandmycode
30 апреля 2009 в 09:34
19

К сожалению, нет, CSS3 нацелен на исправление этого с помощью нового цветового модуля, он позволит вам указывать альфа-значение всякий раз, когда вы указываете цвет. w3.org/TR/css3-color

chharvey
3 января 2012 в 04:05
75

Фактически, непрозрачность дочерних элементов равна , умноженной на непрозрачность родительского элемента, а не отменяется. Так, например, если непрозрачность p была .6, а прозрачность span была .5, то истинная непрозрачность текста в диапазоне была бы 0.3.

pablofiumara
17 ноября 2013 в 15:25
0

Это живой пример того, чего мы достигли в этом ответе? codepen.io/pablofiumara/pen/EIFaH

Stijn Sanders
18 ноября 2013 в 13:20
2

Думаю, да, но поскольку это полупрозрачный фон, вам даже не нужен фильтр / непрозрачность: codepen.io/anon/pen/ksJug

cwd
2 декабря 2013 в 01:42
0

для МЕНЬШЕГО - coderhelper.com/questions/15250708/…

Adrien Be
27 февраля 2014 в 08:22
0

связанные coderhelper.com/questions/4997493/…

Alexander
4 августа 2014 в 12:28
7

@chharvey, что должно произойти, если я определю opacity:.5 для родительского элемента и opacity:2 для дочернего элемента?

chharvey
5 августа 2014 в 23:11
12

@ Александр, я рад, что вы задали этот вопрос. Математически можно было бы предположить, что дочерний элемент вернется к непрозрачности, равной 1. Однако opacity:2; - это недопустимый CSS. Значение свойства opacity должно быть в пределах включающего диапазона [0,1].

EgMusic
11 октября 2017 в 14:52
0

вы можете использовать background: rgb(#, #, #, * Число с плавающей запятой от 0 до 1 * ); Это создаст непрозрачность для вашего фона, если вы хотите просто использовать цвет.

Ответы (33)

avatar
Peter Mortensen
19 июля 2021 в 06:05
2331

Используйте полупрозрачное изображение в формате PNG или SVG либо используйте CSS:

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>
grm
13 июля 2011 в 22:32
90

можно ли это сделать с шестнадцатеричными цветами? Как #fff?

Hans
6 июня 2012 в 21:11
1

rgba (R, G, B, "прозрачность"), поэтому это невозможно с шестнадцатеричным кодом, потому что в шестнадцатеричном коде нет значения для части "прозрачности".

gabeio
7 декабря 2012 в 01:57
0

Вы можете, но должны преобразовать его из шестнадцатеричного кода в его аналог RGB. # RR, GG, BB, если я прав ... но в любом случае вам просто нужно преобразовать 2 шестнадцатеричных символа в десятичное число, которое в конечном итоге будет между 255 и 0, которое затем вы можете просто использовать непосредственно в этом

outis
15 декабря 2012 в 06:59
39

@grm: W3C рассматривал возможность введения формата шестнадцатеричного кода #RRGGBBAA, но они решили этого не делать (по разным причинам), поэтому мы не можем.

Jürgen Paul
30 мая 2013 в 00:34
100

@grm с SASS Вы можете, background-color: rgba(#000, .5);

iono
28 ноября 2013 в 08:17
2

Стоит отметить, что если вы хотите использовать прозрачность, каждый браузер, поддерживающий RGBA, также поддерживает HSLA, что является гораздо более интуитивно понятным цветовым отображением. IE8 - единственный псевдозначимый браузер, который не поддерживает его, поэтому, если это не так, используйте HSL (A) для каждого цвета.

Georg Schölly
30 марта 2014 в 08:32
0

@Alexis: Спасибо за редактирование, но, к сожалению, этот синтаксис возможен только с SASS и т.п. w3.org/TR/css3-color/#rgba-color

BoltClock♦
26 февраля 2015 в 19:01
25

@outis: Хорошие новости, #RRGGBBAA теперь в цветном уровне 4.

XåpplI'-I0llwlg'I -
23 апреля 2015 в 11:10
1

@grm С МЕНЬШЕ, вы можете сделать background-color: fade(#fff, 50%);.

EgMusic
11 октября 2017 в 14:54
0

@grm да, но вы не можете сделать его прозрачным, используя шестнадцатеричные значения

Donald Shahini
12 марта 2020 в 08:00
0

Для меня он работал с использованием формата #AARRGGBB, поэтому у меня работал #1C00ff00. Попробуйте, потому что я видел, как у одних он работает, а у кого-то не работает. Я использую его в CSS.

avatar
Otabek Butcher
29 ноября 2021 в 07:16
0

Думаю, это даст вам желаемый результат:

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;   
}
avatar
user227353
27 октября 2021 в 21:03
0

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

.
function hexToRgba(hex,alpha) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if(result!=null){
      const r = parseInt(result[1], 16);
      const g = parseInt(result[2], 16);
      const b = parseInt(result[3], 16);
      //
      return `rgba(${r},${g},${b},${alpha})`;

    }
    return null;
  }
avatar
stevec
3 июля 2021 в 10:55
0

Поскольку многие люди будут приходить сюда, желая узнать, как настроить непрозрачность любого элемента (не только фона), это так же просто, как добавить opacity: 0.2 (или любое желаемое число от 0 до 1) в CSS этого элемента.

Пример

.myclass {
  color: #eb4746;
  opacity: 0.2;
}

Может использоваться в фонах и в заголовках, абзацах и т. Д.

avatar
Siddhant Jain
22 августа 2020 в 17:41
0

Это дает желаемый результат -

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

Настройка непрозрачности фона.

avatar
AMS777
21 апреля 2020 в 13:44
1

Вы можете использовать значение непрозрачности, добавленное к шестнадцатеричному значению:

background-color: #11ffeeaa;

В этом примере aa - непрозрачность. Непрозрачность 00 означает прозрачный, а ff означает сплошной цвет.

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

background-color: #11ffee;

Вы также можете использовать старый способ с rgba():

background-color: rgba(117, 190, 218, 0.5);

И сокращение background, если вы хотите убедиться, что фон не имеет других стилей, таких как изображения или градиенты:

background: #11ffeeaa;

Из спецификации Mozilla (https://developer.mozilla.org/en-US/docs/Web/CSS/background-color):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
avatar
Donald Shahini
12 марта 2020 в 08:01
0

У меня это сработало при использовании формата #AARRGGBB, поэтому у меня работал #1C00ff00. Попробуйте, потому что я видел, как у одних он работает, а у кого-то не работает. Я использую его в CSS.

avatar
8 сентября 2019 в 14:28
14

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

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

Затем непосредственно под этим div, создайте еще один div с другим классом / идентификатором. Создайте внутри абзац, где вы разместите свой текст. Задайте div положение: относительное и верхнее: -295px (это отрицательное значение 295 пикселей). Присвойте ему z-index 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.

frozenkoi
3 ноября 2013 в 07:03
0

Дополнительного элемента можно избежать и вместо этого использовать псевдоэлемент, например :before или :after

avatar
Vinod Kumar
12 декабря 2018 в 07:29
2

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

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

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

background-color: rgba(R, G, B, Opacity);

Enter image description here

avatar
Rudra
22 мая 2018 в 06:10
2

Вы можете сделать это с помощью 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>
avatar
Alireza
20 октября 2017 в 02:41
1

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

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

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

span {
  color: white;
}
avatar
Adrien Be
23 мая 2017 в 11:54
480

В 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

philfreo
11 ноября 2009 в 18:16
1

Но не в IE8. Я попробовал новый синтаксис -ms-filter, но у меня он все равно не сработал :(

Slapout
20 августа 2010 в 14:20
5

В этом посте показано, как это сделать в IE8: robertnyman.com/2010/01/11/…

Tom Chantler
7 февраля 2011 в 23:10
14

@philfreo: если вы измените первый бит кода Себастьяна на «background: rgb (0, 0, 0) transparent;» теперь он должен работать в IE8. Это беспокоило меня довольно долгое время!

Thorsten Niehues
6 августа 2012 в 09:05
0

filter: progid Отлично работает с IE 9. Цвет: прозрачность, красный, зеленый, синий - все двузначные шестнадцатеричные значения.

user664833
6 февраля 2013 в 23:22
0

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

user664833
6 февраля 2013 в 23:23
0

Кроме того, порядок filter:progid и -ms-filter должен быть обратным. Ознакомьтесь с IEBlog MSDN по этой теме. Вы заметите, что вы можете использовать .Alpha(Opacity=50) вместо .gradient со значениями HEX. Наконец, за этими двумя фильтрами должен следовать opacity: .6;

Adrien Be
27 февраля 2014 в 13:24
0

@Sebastian Markbåge: Я добавил к ответу скриншоты. К сожалению, похоже, что это не работает должным образом. Ни для IE8, ни для IE7. Можете ли вы просмотреть фрагмент кода, который я разместил вместе со скриншотами, и проверить, не пропустил ли я что-нибудь?

Adrien Be
27 февраля 2014 в 13:27
0

@ user664833: вы также можете просмотреть мой код, поскольку вам, кажется, удалось заставить его работать во всех версиях IE (по крайней мере, IE8 и выше)

user664833
27 февраля 2014 в 19:41
1

@AdrienBe - Я отредактировал ваш ответ в соответствии с вашими инструкциями. К сожалению, я какое-то время находился вне зоны внимания этого конкретного вопроса и ответа, поэтому сейчас я не могу добавить к этому разговору.

avatar
Cengkuru Michael
11 февраля 2017 в 08:00
0

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

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}
avatar
Pushp Singh
3 июня 2016 в 12:09
8

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

Например,

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

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

Trevor
14 июля 2016 в 14:57
0

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

Pushp Singh
21 июля 2016 в 13:05
0

Да исправить. Это один из способов борьбы с современным браузером.

Peter Mortensen
8 сентября 2019 в 14:44
0

Что вы имеете в виду под "или меньше будет прозрачности" (это кажется непонятным)? (Ответьте, отредактировав свой ответ, а не здесь, в комментариях, если это необходимо.)

avatar
alex
3 июня 2015 в 07:28
6

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

avatar
edd2110
29 декабря 2014 в 16:25
1

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

Используйте внутреннюю тень, например:

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

Вот и все :)

avatar
premgowda
18 ноября 2014 в 10:47
3
<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/?

avatar
web-tiki
5 октября 2014 в 08:15
57

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

DEMO

Вывод:

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 и более поздних версий.

avatar
user3968801
14 сентября 2014 в 19:21
4

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

Вот пример:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
avatar
suraj rawat
7 августа 2014 в 02:39
9

Если вы 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**
}
avatar
Henrik
6 декабря 2013 в 14:40
4

Вы можете решить эту проблему для 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')";
avatar
Touhid Rahman
20 мая 2013 в 23:36
7

CSS 3 предлагает простое решение вашей проблемы. Использование:

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

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

Peter Mortensen
8 сентября 2019 в 14:41
0

Чем это отличается от некоторых предыдущих ответов?

avatar
Will Nielsen
8 января 2013 в 20:00
6

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

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

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


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

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

avatar
frozenkoi
14 января 2012 в 00:14
21

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

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

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

avatar
thinsoldier
26 января 2011 в 16:36
15

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

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

avatar
joren
25 октября 2010 в 13:55
12

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

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

avatar
Gorkem Pacaci
13 июля 2010 в 20:51
115

Это лучшее решение, которое я мог придумать, НЕ используя 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>
Rolf
19 декабря 2010 в 17:24
19

Он сказал: «Не разделяя текст и фон на два элемента, расположенных друг над другом». В любом случае, спасибо, это хорошее исправление и полезно, но в некоторых случаях вы хотите, чтобы непрозрачный элемент был дочерним по отношению к полупрозрачному.

Adrien Be
25 февраля 2014 в 17:40
0

Я ответил почти так же на другой вопрос SO, но добавил jsfiddle и доказательства скриншотов (IE7 +), см. Здесь, если интересно coderhelper.com/a/21984546/759452

Adrien Be
27 февраля 2014 в 13:40
0

@Gorkem Pacaci: убедитесь, что свойства непрозрачности "действительно" кроссбраузерны, вы можете использовать этот фрагмент кода из CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity

AndFisher
6 декабря 2016 в 09:07
0

Почему бы не сделать это с помощью псевдоэлемента типа :after и избежать лишней разметки?

avatar
Slipp D. Thompson
24 мая 2010 в 16:07
65

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

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

Кроме того, это дает вам много свободы для фона; вы можете поместить что угодно в задний элемент и не повлиять на поток контента (если вам нужно несколько полноразмерных подслоев, просто убедитесь, что у них также есть position: absolute, width / height: 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> вместо <span>, чтобы упростить свой CSS.

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

.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

Burkely91
14 июня 2015 в 02:23
0

В какой ситуации нельзя использовать для этого CSS3?

Slipp D. Thompson
4 января 2016 в 10:17
0

@ Burkely91 Если вы можете сделать это в CSS3, то обязательно используйте это. Но фон CSS3 не поддерживает ни все типы контента, ни полную гибкость макета. Приведенный выше пример конверта / письма было бы сложно реализовать с помощью CSS3 из-за независимо повторяющихся краев и заливки по центру. Также имейте в виду, что этот ответ был первоначально написан 5 лет назад, до того, как поддержка CSS3 получила широкое распространение.

Slipp D. Thompson
6 февраля 2016 в 11:07
2

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

Slipp D. Thompson
6 февраля 2016 в 11:11
0

@Igor Ivancha Кроме того, похоже, вы запускали код через средство красоты, которое помещало каждый селектор и свойство CSS в отдельную строку. Мои примеры были написаны с намеренным переносом строк и интервалом для логической группировки частей, которые читатель должен понимать вместе - например, большинство свойств width: & height: разделяют линию, потому что они представляют собой конструкции одного типа и лучше понимаются как двумерная форма, а не пара одномерных ограничений. Кроме того, в некоторые строки изрядно упаковано, потому что это повторяющийся контент, который не так уж важно выставлять напоказ.

Slipp D. Thompson
6 февраля 2016 в 11:15
0

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

avatar
Gelens
30 апреля 2009 в 20:42
58

Лучше использовать полупрозрачный .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');
}
avatar
philnash
30 апреля 2009 в 09:52
10

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

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

avatar
SvenFinke
30 апреля 2009 в 09:14
16

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

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

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

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

avatar
fearoffours
30 апреля 2009 в 09:13
9

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

avatar
Chris
30 апреля 2009 в 09:11
22

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

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

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

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

Stijn Sanders
30 апреля 2009 в 12:51
2

Все, что мне нужно, это простой цвет фона. Какой размер PNG вы бы предложили создать с этим цветом? 1x1 заставит рендеринг выполнять много работы, слишком много пикселей делает этот PNG довольно большим (должен быть нормальным размером файла после сжатия, но все же для рендеринга необходимо распаковать его, чтобы использовать) ...

Chris
30 апреля 2009 в 14:27
3

Я бы рекомендовал что-то вроде 30px x 30px, который использует меньше памяти при рендеринге, чем 1x1, и все же достаточно мал, чтобы минимизировать использование полосы пропускания.