Jak nadać tekstowi lub obrazowi przezroczyste tło za pomocą CSS?
Czy jest możliwe, używając tylko CSS, aby background elementu był półprzezroczysty, ale jego zawartość (tekst i obrazy) była nieprzezroczysta?
Chciałbym to osiągnąć, nie mając tekstu i tła jako dwóch oddzielnych elementów.
Podczas próby:
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>Wygląda na to, że elementy potomne są poddawane nieprzezroczystości rodziców, więc {[3] } jest względem opacity:0.6 rodzica.
27 answers
Albo użyj półprzezroczystego PNG obrazu lub użyj CSS3:
background-color:rgba(255,0,0,0.5);
Oto artykuł z css3.info, nieprzezroczystość, rgba i kompromis (2007-06-03).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-30 08:31:18
W Firefoksie 3 i Safari 3, Można używać RGBA jak Georg Schölly wspomniał .
Mało znany trik polega na tym, że można go używać w Internet Explorerze, jak również za pomocą filtra gradientowego.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
Pierwsza liczba hex określa wartość alfa koloru.
Pełne rozwiązanie wszystkie przeglądarki:
.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)";
}
To jest z przezroczystość tła CSS bez wpływu na elementy potomne, poprzez RGBa i filtry.
Screenshoty dowód wyniki:
Jest to przy użyciu następującego kodu:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:59
Jest to najlepsze rozwiązanie, jakie mogłem wymyślić, nie używając CSS 3. I działa świetnie na Firefoksie, Chrome i Internet Explorer, o ile widzę.
Umieść kontener DIV I dwa potomne Div na tym samym poziomie, jeden dla treści, jeden dla tła. I używając CSS, Auto-rozmiar tła, aby dopasować zawartość i umieścić tło faktycznie z tyłu za pomocą 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-30 20:45:51
Lepiej jest użyć półprzezroczystego .png.
Wystarczy otworzyć Photoshop , utworzyć 2x2 pixel image (picking 1x1 może spowodować błąd w Internet Explorerze!), wypełnij go zielonym kolorem i Ustaw krycie w zakładce "warstwy" na 60%. Następnie zapisz go i zrób z niego obraz tła:
<p style="background: url(green.png);">any text</p>
Działa fajnie, oczywiście, z wyjątkiem uroczego Internet Explorer 6 . Są lepsze poprawki dostępne, ale tutaj jest szybki hack:
p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:41
Dla prostego półprzezroczystego koloru tła, powyższe rozwiązania (obrazy CSS3 lub BG) są najlepszymi opcjami. Jeśli jednak chcesz zrobić coś bardziej fantazyjnego (np. animację, Wiele tła itp.jeśli nie chcesz polegać na CSS3, możesz wypróbować "technikę okienkową": {]}
.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>
- jeden ("tył"), który pasuje do wielkości elementu szyby bez wpływu na przepływ treść,
- i jeden ("cont"), który zawiera zawartość i pomaga określić rozmiar panelu.
Znacznik position: relative na panelu jest ważny; informuje on tylną warstwę, aby pasowała do rozmiaru panelu. (Jeśli chcesz, aby znacznik <p> był absolutny, Zmień okienko z <p> na <span> i zawiń to wszystko w znacznik absolutnej pozycji <p>.)
Główną zaletą tej techniki w stosunku do podobnych wymienionych powyżej jest to, że okno nie musi mieć określonego rozmiaru; jak zakodowano powyżej, będzie pasował na całą szerokość (normalny układ elementów blokowych) i tylko tak wysoki, jak zawartość. Zewnętrzny element panelu może być dowolnie dopasowany, o ile jest prostokątny(np. inline-block będzie działał; plain-old inline nie będzie).
Daje również dużo swobody dla tła; możesz umieścić naprawdę wszystko w tylnym elemencie i nie wpływać na przepływ treści (jeśli chcesz wiele pełnowymiarowych podwarstw, po prostu upewnij się, że mają one również pozycję: absolute, szerokość / wysokość: 100% i góra/dół/lewo/prawo: auto).
Jedną z odmian pozwalających na dopasowanie wstawki tła (poprzez górny / dolny / lewy / prawy) i / lub przypinanie tła (poprzez usunięcie jednej z par lewa/prawa lub góra/dół) jest użycie następującego CSS:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Jak napisano, działa to w Firefoksie, Safari, Chrome, IE8+ i operze, chociaż IE7 i IE6 wymagają dodatkowych CSS i wyrażeń, IIRC, a ostatnio sprawdzałem, druga odmiana CSS nie działa w Opera.
Rzeczy, na które warto uważać:
- elementy pływające wewnątrz warstwy cont nie zostaną zawarte. Musisz się upewnić, że są wyczyszczone lub w inny sposób zabezpieczone, albo wymkną się z dna.
- marginesy znajdują się na elemencie okienka, a wypełnienia na elemencie Kontu. Nie używaj odwrotnie (marginesy na kontach lub padding na panelu), bo odkryjesz dziwactwa, takie jak strona zawsze jest nieco szersza niż okno przeglądarki.
- jako wspomniany, całość musi być block lub inline-block. Możesz używać
<div>s zamiast<span>s, aby uprościć swój CSS.
[16]} pełniejsze demo, pokazujące elastyczność tej techniki, używając jej w tandemie z
display: inline-block oraz z auto i specyficznymi widths/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>A oto demo na żywo szeroko stosowanej techniki:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-13 10:54:40
Istnieje pewna sztuczka, aby zminimalizować znaczniki: użyj pseudo elementu jako tła i możesz ustawić krycie bez wpływu na główny element i jego dzieci:
Wyjście:
Odpowiedni kod:
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>Obsługa przeglądarki to Internet Explorer 8 i nowsze.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 18:59:43
Najprostszą metodą byłoby użycie półprzezroczystego tła PNG image .
Możesz użyć JavaScript, aby to działało w Internet Explorer 6 jeśli potrzebujesz.
Używam metody opisanej w przezroczyste PNGs w Internet Explorerze 6.
Poza tym,
Możesz sfałszować używając two side-by-side sibling elements - zrobić jeden półprzezroczysty , a następnie absolutely position the other over the top?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-05 07:23:59
Ta metoda pozwala mieć obraz w tle, a nie tylko jednolity kolor, i może być używana do uzyskania przezroczystości na innych atrybutach, takich jak obramowania. Nie są wymagane przezroczyste obrazy PNG.
Użyj :before (lub :after) w CSS i nadaj im wartość krycia, aby pozostawić element w oryginalnym kryciu. W ten sposób możesz użyć :before, aby utworzyć sztuczny element i nadać mu przezroczyste tło (lub obramowania) i przenieść go za zawartość, którą chcesz zachować nieprzezroczystą z-index.
Przykład (fiddle) (zauważ, że DIV z klasą dad jest tylko po to, aby zapewnić kontekst i kontrast dla kolorów, ten dodatkowy element nie jest w rzeczywistości potrzebny, a czerwony prostokąt jest przesunięty nieco w dół i w prawo, aby zostawić widoczne tło za elementem 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>
Z tym 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;
}
W tym przypadku .fancyBg:before ma właściwości CSS, które chcesz mieć z przezroczystością (czerwone tło w tym przykładzie, ale może być obrazkiem lub granice). Jest ustawiony jako absolutny, aby przesunąć go za .fancyBg (użyj wartości zero lub cokolwiek jest bardziej odpowiednie dla Twoich potrzeb).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-06 11:17:21
Prawie wszystkie te odpowiedzi zakładają, że projektant chce jednolitego koloru tła. Jeśli projektant rzeczywiście chce zdjęcie jako tło jedynym prawdziwym rozwiązaniem w tej chwili jest JavaScript jak jQuery Transify plugin wspomniano gdzie indziej .
To, co musimy zrobić, to dołączyć do dyskusji grupy roboczej CSS i sprawić, aby dali nam atrybut nieprzezroczystości tła! Powinien działać w parze z funkcją multiple-tła.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:38
Problem polega na tym, że tekst w twoim przykładzie ma pełne krycie. Ma pełne krycie wewnątrz znacznika p, ale znacznik p jest po prostu półprzezroczysty.
Możesz dodać półprzezroczysty obraz tła PNG zamiast realizowania go w CSS, lub rozdzielić tekst i div na 2 elementy i przesunąć tekst nad ramką(na przykład ujemny margines).
W przeciwnym razie nie będzie to możliwe.EDIT:
Tak jak wspomniał Chris: jeśli używasz pliku PNG z przezroczystość, musisz użyć obejścia JavaScript, aby to działało w nieznośnym Internet Explorer...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-25 11:14:45
Oto Jak to robię (może nie jest optymalne, ale działa):
Utwórz div, które chcesz być półprzezroczyste. Nadaj mu klasę / id. Zostaw puste i zamknij. Ustaw wysokość i szerokość(powiedzmy 300 pikseli na 300 pikseli). Nadaj mu krycie 0,5 lub cokolwiek chcesz i kolor tła.
Następnie, bezpośrednio pod tym div, Utwórz inny div z inną klasą / id. Utwórz w nim akapit, w którym umieścisz swój tekst. Podaj pozycję div: względny, a góra: -295px (czyli ujemne 295 pikseli). Daj mu Indeks z równy 2 i upewnij się, że jego nieprzezroczystość wynosi 1. Styluj swój akapit tak, jak chcesz, ale upewnij się, że wymiary są mniejsze niż wymiary pierwszego div, aby nie przepełniał się.
.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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-30 19:04:39
Oto wtyczka jQuery, która zajmie się wszystkim za Ciebie, Transify (Transify-wtyczka jQuery do łatwego stosowania przezroczystości / krycia na tle elementu).
Co jakiś czas spotykałem się z tym problemem, więc postanowiłem napisać coś, co znacznie ułatwi życie. Skrypt ma mniej niż 2 KB i wymaga tylko 1 linii kodu, aby go uruchomić, a także zajmie się animowaniem przezroczystości tła, jeśli chcesz.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-25 11:28:36
nieprzezroczystość tła, ale nie tekstu ma kilka pomysłów. Użyj półprzezroczystego obrazu lub nakładaj dodatkowy element.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:31:36
Jakiś czas temu pisałem o tym w Cross Browser background Transparency With CSS.
O dziwo Internet Explorer 6 pozwoli uczynić tło przezroczystym i zachować tekst na wierzchu w pełni nieprzezroczystym. Dla innych przeglądarek sugeruję użycie przezroczystego pliku PNG.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-25 11:17:40
Jeśli jesteś Photoshopem, Możesz również użyć:
#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Lub:
#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 18:55:46
Background-color: rgba(255,0,0,0.5); Jak wspomniano powyżej jest najlepszą odpowiedzią po prostu. Używanie CSS3, nawet w 2013 roku, nie jest proste, ponieważ poziom obsługi różnych przeglądarek zmienia się z każdą iteracją.
[1]} podczas gdybackground-color jest obsługiwany przez wszystkie główne przeglądarki (nie są nowe w CSS3) [1] przezroczystość alfa może być trudna, szczególnie w Internet Explorerze przed wersją 9 i z kolorem obramowania w Safari przed wersją 5.1. [2]
Używanie czegoś w rodzaju Compass lub SASS może naprawdę pomóc w produkcji i kompatybilności między platformami.
[1] W3Schools: CSS background-color Property
[2] Norman ' s Blog: przeglądarka Wsparcie Checklist CSS3 (październik 2012)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-08 20:00:39
CSS3 ma łatwe rozwiązanie twojego problemu. Użycie:
background-color:rgba(0,255,0,0.5);
Tutaj rgba oznacza czerwony, zielony, niebieski i wartość alfa. Wartość zieloną uzyskuje się z powodu 255, a połowę przezroczystości uzyskuje się przez wartość 0,5 Alfa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-20 23:36:50
Aby tło elementu było półprzezroczyste, ale jego zawartość (tekst i obrazy) była nieprzezroczysta. Musisz napisać kod css dla tego obrazu i musisz dodać jeden atrybut o nazwie krycie z minimalną wartością. np.
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// mniejsza wartość więcej będzie przezroczystością, lub wartość mniej będzie przezroczystością.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-03 12:09:42
Jeśli używasz Mniej , możesz użyć fade(color, 30%).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 19:01:24
Możesz rozwiązać ten problem dla Internet Explorer 8 za pomocą (ab)przy użyciu składni gradientu. Format koloru to ARGB. Jeśli używasz preprocesora Sass, możesz konwertować Kolory za pomocą wbudowanej funkcji "ie-hex-str ()".
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 18:54:35
Możesz użyć czystego CSS 3: rgba(red, green, blue, alpha), Gdzie alpha jest pożądanym poziomem przezroczystości. Nie ma potrzeby stosowania JavaScript ani jQuery.
Oto przykład:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 18:57:20
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-18 11:05:59
Jest łatwiejsze rozwiązanie, aby umieścić nakładkę na obrazek na tym samym div. To nie jest właściwe użycie tego narzędzia. Ale działa jak urok, aby wykonać tę nakładkę za pomocą CSS.
Użyj takiego cienia:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
To wszystko:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 19:00:31
Możesz użyć RGBA (red, green, blue, alpha) W CSS , coś takiego:
Więc po prostu zrób coś takiego w Twoim przypadku:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-20 02:41:59
Zazwyczaj używam tej klasy do pracy. Całkiem nieźle.
.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 */
}Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-11 08:00:03
Możesz zrobić z
rgba color codeużywając css jak ten przykład podany poniżej.
.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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-22 06:10:43
Możesz użyć koloru RGB z nieprzezroczystością, jak ten kod koloru W RGB (63,245,0) i dodać nieprzezroczystość, jak (63,245,0,0.5), a także dodać rgba zastąpić RGB. Zastosowanie do krycia
div{
background:rgba(63,245,0,0.5);
}Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-29 09:40:00