Як надати тексту чи зображенню прозорий фон за допомогою CSS?

2283

Чи можливо, використовуючи лише 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батьківських.

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

Відповіді:

2276

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

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>
Розгорніть фрагмент

— Пітер Мортенсен
джерело
86
чи можна це зробити з шестигранними кольорами? Як #fff?
— грм
35
@grm: W3C розглядав можливість введення шестигранного формату коду #RRGGBBAA, але вони вирішили не (з різних причин), тому ми не можемо.
— outis
95
@grm з SASS Ви можете,background-color: rgba(#000, .5);
— Юрген Пол
2
Варто зазначити, що якщо ви хочете використовувати прозорість, кожен браузер, який підтримує RGBA, також підтримує HSLA , що є набагато більш інтуїтивним кольоровим відображенням. IE8 - єдиний псевдозначущий браузер, який не підтримує його, тому забороняється, що йде вперед і використовує HSL (A) для кожного кольору.
— іоно
19
@outis: Гарні новини, #RRGGBBAA зараз на рівні 4 кольору .
— BoltClock
476

У 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

— Adrien Be
джерело
1
Але не в IE8. Я спробував новий синтаксис -ms-filter, але він все ще не працював для мене :(
— philfreo
5
Цей пост показує, як це зробити в IE8: robertnyman.com/2010/01/11/…
— Slapout
14
@philfreo: Якщо ви зміните перший біт коду Себастьяна на "background: rgb (0, 0, 0) transparent;" Тепер він повинен працювати в IE8. Це дуже клопоче мене!
— Том Чантлер
фільтр: progid Відмінно працює з IE 9. Колір: прозорість, червоний, зелений, синій - всі двозначні значення шістнадцятки.
— Торстен Niehues
1
@AdrienBe - я відредагував вашу відповідь відповідно до ваших інструкцій. На жаль, я деякий час перебуваю поза сферою обговорення цього питання, тому наразі не можу додати до цієї розмови.
— user664833
108

Це найкраще рішення, яке я міг придумати, НЕ використовуючи CSS 3. І він чудово працює на Firefox, Chrome та Internet Explorer, наскільки я бачу.

Поставте контейнер divі двох дітей divна один і той же рівень, один для вмісту, один для фону. І використовуючи CSS, автоматично розміріть фон, щоб підходити до вмісту, а фон фактично розміщувався ззаду, використовуючи z-індекс.

.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>
Розгорніть фрагмент

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

Для простого напівпрозорого кольору фону вищевказані рішення (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>тег, щоб він був абсолютним, змініть панель з a <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 скріншот

— Сліпп Д. Томпсон
джерело
У якій ситуації ви б не хотіли використовувати для цього CSS3?
— Burkely91
@ Burkely91 Якщо ви можете це зробити в CSS3, то абсолютно використовуйте це. Але фон CSS3 не підтримує всі типи контенту, а також повну гнучкість верстки. Наведений вище приклад конвертів / букв буде важко витягнути за допомогою CSS3 через незалежно повторювані краї та заливки по центру. Також майте на увазі, що ця відповідь була написана 5 років тому, перш ніж підтримка CSS3 отримала широке поширення.
— Сліп Д. Томпсон,
2
@Igor Ivancha Відступив від змін. Вибачте, змінити відступ від моєї бажаної форми (вкладок) на ваш (2 пробіли) - це не круто. Можливо, у вас є вагомі підстави використовувати 2-пробільні відступи у щоденних кодових проектах, але для представлення в Інтернеті я вважаю, що вкладки мають чітку виграш - чим глибший відступ полегшує визначення рівнів ієрархії, і це далеко легше надійно перетворити вкладки в пробіли, і це більш сумісна форма для всіх читачів.
— Сліпп Д. Томпсон
@Igor Ivancha Крім того, схоже, ви запустили код, хоча красуня, яка ставить кожен селектор CSS та властивість у свою лінію. Мої приклади були написані з навмисними розривами рядків та пробілами для логічного групування фрагментів, які повинні розуміти читач разом - наприклад, більшість width:& height:властивості поділяють рядок, оскільки вони однотипні конструкції і краще розуміються як двовимірна форма, а не пара одновимірних обмежень. Крім того, деякі рядки містять неабияку кількість, тому що це повторний контент, який не все так важливо, щоб показати.
— Сліпп Д. Томпсон
@Igor Ivancha Логічна організація, групування та стилізація надзвичайно важлива для написання здорового, зрозумілого коду, як і у всіх видах написання. Зміни, які ви внесли, були еквівалентом переходу до когось посади та усунення всіх перерв на абзаци та введення форсованого нового рядка після кожного речення. Якщо ви хочете бути таким нахабно педантичним у своїй роботі, добре, ви можете це зробити. Але, будь ласка, не придушуйте смисловий характер і вираз у чужих творах.
— Сліп Д. Томпсон
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');
}
— Громада
джерело
54

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

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 і новіших версій.

— веб-тики
джерело
23

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

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

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

Окрім цього, ви можете підробити це за допомогою двох бічних елементів побратимів - зробіть один напівпрозорим , а потім абсолютно розташуйте інший над вершиною .

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

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

— заморожений
джерело
17

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

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

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

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

— SvenFinke
джерело
15

Майже всі ці відповіді припускають, що дизайнер бажає суцільного кольорового фону. Якщо дизайнер насправді хоче фотографію як тло, єдиним реальним рішенням на даний момент є JavaScript, як плагін jQuery Transify, згаданий в іншому місці .

Що нам потрібно зробити - це приєднатися до дискусії робочої групи CSS і змусити їх дати нам атрибут фонової непрозорості! Це повинно працювати рука об руку з функцією мульти-фону.

— thinsoldier
джерело
14

Ось як я це роблю (це може бути не оптимально, але це працює):

Створіть те, divщо ви хочете бути напівпрозорим. Дайте клас / id. Залиште це порожнім і закрийте. Надайте йому задану висоту та ширину (скажімо, 300 пікселів на 300 пікселів). Надайте непрозорість 0,5 або все, що вам подобається, і колір фону.

Потім, безпосередньо під цим ділом, створіть ще один 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.

— парирують іонеску
джерело
Додатковий елемент можна уникнути, а замість цього використовувати псевдоелемент, наприклад, :beforeабо:after
— Заморожений
12

Ось плагін jQuery, який обробляє все за вас, Transify ( Transify - плагін jQuery, щоб легко застосувати прозорість / непрозорість до фону елемента ).

Я раз у раз стикався з цією проблемою, тому вирішив написати щось, що полегшило б життя. Сценарій становить менше 2 Кб, і для його роботи потрібен лише один рядок коду, а також він буде працювати з анімуванням непрозорості фону, якщо вам потрібно.

— жорен
джерело
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**
}
— suraj rawat
джерело
8

Для того, щоб зробити фон елемента напівпрозорим, але мати вміст (текст і зображення) елемента непрозорим, вам потрібно написати CSS-код для цього зображення, і вам потрібно додати один атрибут, викликаний opacityмінімальним значенням.

Наприклад,

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

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

— Пушп Сінгх
джерело
Це один із способів зробити це в сучасних браузерах. Я поєдную це зі значеннями rgba як резервний
— Тахір Халід
Так, правильно. Це один із способів поводження з сучасним браузером.
— Пушп Сінгх
Що ви маєте на увазі під «рудим значенням буде прозорість» (це здається незрозумілим)? (Відповідь, відредагувавши свою відповідь , а не тут у коментарях, якщо це доречно.)
— Peter Mortensen
7

CSS 3 має просте рішення вашої проблеми. Використання:

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

Тут rgbaрозшифровується значення червоного, зеленого, синього та альфа-значення. Зелене значення отримується через 255, а половина прозорості отримується значенням 0,5 альфа.

— Тухід Рахман
джерело
Чим це відрізняється від попередніх відповідей?
— Пітер Мортенсен
6

фоновий колір: 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

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

— Буде Нільсен
джерело
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')";
— Генрік
джерело
4

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

Ось приклад:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
— Пітер Мортенсен
джерело
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/ ?

— premgowda
джерело
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>
Розгорніть фрагмент

— Рудра
джерело
1

Є простіше рішення накласти накладку над зображенням на один і той же діл. Це не правильне використання цього інструменту. Але працює як шарм, щоб зробити цю накладку за допомогою CSS.

Використовуйте вставну тінь так:

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

Це все :)

— edd2110
джерело
1

Ви можете використовувати RGBA (red, green, blue, alpha) в CSS . Щось на зразок цього:

Тож у вашому випадку просто робити щось подібне:

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

span {
  color: white;
}
— Аліреза
джерело
1

Як на мою точку зору, найкращий спосіб використовувати колір тла з непрозорістю, як показано нижче. Якщо ми будемо використовувати це, то ми не втратимо непрозорість для інших елементів, наприклад тестового кольору, облямування тощо.

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

Використовуйте колір тла з непрозорістю

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

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

— Вінод Кумар
джерело
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 */
}
Розгорніть фрагмент

— Cengkuru Michael
джерело
0

Це працювало для мене під час використання формату, #AARRGGBBтому той, який працював для мене, був #1C00ff00. Спробуйте, бо я бачив, як це працює для когось, а не для когось іншого. Я використовую його в CSS.

— Дональд Шахіні
джерело
0

Ви можете використовувати значення непрозорості, додане до шістнадцяткового значення:

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;
— AMS777
джерело
-2

Ви можете використовувати колір RGB з непрозорістю, як код кольору в RGB (63, 245, 0) і додати непрозорість (наприклад, 63, 245, 0, 0,5), а також замінити RGB на RGBA. Aвикористовується для непрозорості.

div {
  background: rgba(63, 245, 0, 0.5);
}
Розгорніть фрагмент

— Віджай Шарма
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.