Питання Як надати текст чи зображення прозорий фон за допомогою 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 від батька.


1998
2018-04-30 09:00


походження


На жаль, CSS3 націлений на виправлення цього з новим кольоровим модулем, це дозволить вам вказати альфа-значення кожного разу, коли ви визначите колір. w3.org/TR/css3-color - meandmycode
Фактично, непрозорість дочірніх елементів - це помножити за непрозорості батьківського елемента, не перевизначено. Так, наприклад, якщо pросійська непрозорість була .6 і spanросійська непрозорість була .5 то буде справжня непрозорість тексту в проміжку 0.3. - chharvey
Згадайте так, але так як це напівпрозорий фон, вам навіть не потрібний фільтр / непрозорість: codepen.io/anon/pen/ksJug - Stijn Sanders
@chharvey, що повинно відбутися, якщо я визначу opacity:.5 для батьків і opacity:2 для дочірнього елемента? - Alexander
@ Александр, я радий, що ти запитав це питання. Математично, можна підозрювати, що дитина повернеться до непрозорість 1. Однак, opacity:2; є недійсний CSS. Значення значення opacity власність повинен бути в межах включно [0,1]. - chharvey


Відповіді:


Або використовуйте напівпрозорі PNG зображення або використання CSS3:

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

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


2115
2017-07-13 20:51



Чи можна це зробити в шестигранних кольорах? Як #fff? - grm
@grm javascripter.net/faq/hextorgb.htm - kb.
@grm: W3C розглядав можливість введення формату шістнадцяткового коду #RRGGBBAA, але вони вирішили не (з різних причин), тому ми не можемо. - outis
@grm з SASS Ти можеш, background-color: rgba(#000, .5); - Jürgen Paul
@ otis: хороші новини, #RRGGBBAA тепер знаходиться на рівні кольору 4 рівня. - BoltClock♦


У 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


456
2018-04-30 20:42



Це, здається, чудово працює як в IE6, так і в IE7 ... спасибі! - philfreo
Але не в IE8. Я спробував новий синтаксис -ms-filter, але він все одно не працював для мене :( - philfreo
Це повідомлення показує, як це зробити в IE8:robertnyman.com/2010/01/11/... - Slapout
@philfreo: Якщо ви зміните перший біт коду Себастьяна на "background: rgb (0, 0, 0) прозорий"; тепер він повинен працювати в IE8. Це тривалий час перебивало мене! - Tom Chantler
@AdrienBe - я відредагував вашу відповідь згідно з вашими вказівками. На жаль, я деякий час опинився поза межами цього конкретного питання та питання, тому я не можу додати до цієї бесіди на цей раз. - user664833


Це найкраще рішення, яке я міг придумати, НЕ використовуючи 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>


97
2018-05-24 16:07



Він сказав: "Не відокремлюючи текст і фон в двох елементах, розташованих один над одним". Завдяки вдячністю це добре, це корисно, але в деяких випадках ви хочете, щоб непрозорий елемент був дитиною напівпрозорого. - Rolf
Я відповів майже так само на інше запитання SO, але додав jsfiddle & screenshot proofs (IE7 +), дивіться тут, якщо цікаво stackoverflow.com/a/21984546/759452 - Adrien Be
@Gorkem Pacaci: переконайтеся, що властивості непрозорості є "дійсно" крос-браузером, ви можете використовувати цей фрагмент коду з CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity - Adrien Be
Чому б це не робити з псевдоелементом? :after і уникнути додаткової розмітки? - AndFisher


Краще використовувати напівпрозорі .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');
}

54
2017-10-05 08:15



Ви можете використовувати paint.net також. - Donny V.


Для простих напівпрозорих фонових кольорів наведені вище рішення (зображення 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>

Методика працює з використанням двох "шарів" усередині елемента зовнішньої панелі:

  • один ("зворотний"), який відповідає розміру елементу панелі, не впливаючи на потік вмісту,
  • і один ("contin"), який містить вміст і допомагає визначити розмір панелі.

The position: relative на панелі важливо; він відображає шар назад, щоб відповідати розміру панелі. (Якщо вам потрібна <p> тег бути абсолютним, змінити панель з a <p> до a <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>замість цього <span>щоб спростити CSS.

Більш повна демонстрація, демонструючи гнучкість цієї техніки, використовуючи її разом з display: inline-block, і з обома auto & специфічний widthс /min-heightс:

.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


51
2018-04-30 09:11



У якій ситуації б не хотіла використовувати CSS3 для цього? - Burkely91
@ Burkely91 Якщо ви можете це зробити в CSS3, то абсолютно користуйтеся цим. Але фонове оформлення CSS3 не підтримує всі типи вмісту, а також гнучкість у повному форматі. Зверніть увагу, що вищезазначений конверт / лист може бути складним з допомогою CSS3 через незалежні повторювані ребра та заповнення центру. Також майте на увазі, що ця відповідь була спочатку написана 5 років тому, перш ніж підтримка CSS3 була поширеною. - Slipp D. Thompson
@ Ігор Іванча відкинув ваші зміни. На жаль, зміна відступу від вибраної форми (вкладки) до вашої (2 пробіли) не круто. У вас, можливо, є вагомі причини використовувати відступ 2-просторового відображення у ваших щоденних командних проектах, але для презентації в Інтернеті я вважаю, що вкладки мають явну перевагу - глибші відступи полегшують розпізнавання рівнів ієрархії, і це далеко Легше надійно конвертувати вклади в пробіли, і тому це більш сумісна форма всіх читачів. - Slipp D. Thompson
@ Ігор Іванча Також, здається, ви запустили код, хоча це прикраса, котрий виставляє кожен CSS-селектор та властивість у власному рядку. Мої приклади були написані з навмисними розривами рядків і відстані до логічно групових штук, які повинні бути зрозумілі разом читачеві, наприклад. найбільше width: & height: властивості поділяють лінію, оскільки вони однаковий тип конструкції і краще розуміються як 2-мірна форма, а не пара 1-мірних обмежень. Крім того, деякі з рядків мають достатню кількість упакованих в них, тому що це повторюваний вміст, що не все, що важливо, щоб показати. - Slipp D. Thompson
@ Ігор Іванча Логічна організація, групування та стиль є надзвичайно важливими для написання здорового, зрозумілого коду, так само, як і з усіма видами письма. Зміни, внесені вами, еквівалентні тому, що відбуваються в когось із публікацій та видаляються всі переривання абзаців, а після кожного речення - вимушене нове слово. Якщо ви хочете бути такими непривабливо педантичними у своїй роботі, добре, ви вільні робити це. Але будь-ласка, не спустіть семантичний характер і вираз в чужій роботі. - Slipp D. Thompson


Існує трюк, щоб мінімізувати розмітку: Використовуйте a псевдоелемент як фон, і ви можете встановити його непрозорість, не торкаючись головного елемента та його дітей:

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 і пізніше.


47
2018-01-14 00:14





Найпростіший спосіб полягає у використанні напівпрозорого фону Зображення PNG.

Ви можете використовувати JavaScript для його роботи Internet Explorer 6 якщо вам потрібно.

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

Крім того, що,

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


23
2018-04-30 09:14



Все, що мені потрібно - це простий колір фону, який розмір PNG ви запропонуєте створити з таким кольором? 1x1 зробить рендеринг багато роботи, занадто багато пікселів робить цей PNG досить великий (повинен бути правильний розмір файлу після стиснення, але все-таки рендеринг потрібно розпакувати, щоб використовувати його) ... - Stijn Sanders
Я б рекомендував щось на зразок 30px x 30px, який використовує меншу пам'ять, якщо вона повторюється, ніж 1x1, і все ще достатньо мала, щоб мінімізувати використання пропускної здатності. - Chris


Цей метод дозволяє вам мати зображення у фоновому режимі, а не тільки однорідний, і його можна використовувати для прозорості інших атрибутів, таких як межі. Немає прозорих зображень PNG.

Використовуйте :before (або :after) в CSS і надасть їм значення непрозорість, щоб залишити елемент у його початковій непрозорості. Таким чином, ви можете використовувати: перш ніж створити штучний елемент і надати йому прозорий фон (або межі), який ви хочете, і перемістіть його за вмістом, який ви хочете зберегти непрозорістю 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 (використовуйте значення нуля або будь-яке інше, яке підходить для ваших потреб).


20
2018-01-26 16:36





Проблема в тому, що текст насправді має повну непрозорість у вашому прикладі. Вона має повну непрозорість всередині p тег, але p тег просто напівпрозорий.

Ви можете додати напівпрозоре фонове зображення PNG, замість того, щоб реалізувати його в CSS, або розділити текст і розділити на 2 елементи, а також перемістити текст над коробкою (наприклад, негативна маржа).

Інакше це не буде можливим.

EDIT:

Так само, як зазначив Кріс: якщо ви використовуєте файл PNG з прозорістю, вам доведеться скористатись робочим столом JavaScript, щоб він працював у "зловісному" оглядачі Internet Explorer ...


14
2017-10-25 13:55