CSS භාවිතා කරමින් පෙළ හෝ රූපයක් විනිවිද පෙනෙන පසුබිමක් ලබා දෙන්නේ කෙසේද?

2286

backgroundමූලද්‍රව්‍යයක අර්ධ පාරදෘශ්‍ය බවට පත් කිරීමට CSS පමණක් භාවිතා කළ හැකි නමුත් මූලද්‍රව්‍යයේ පාරාන්ධතාව (පෙළ සහ රූප) තිබේද?

පෙළ සහ පසුබිම වෙනම අංග දෙකක් නොමැතිව මෙය ඉටු කිරීමට මම කැමතියි.

උත්සාහ කරන විට:

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 
— ස්ටිජන් සැන්ඩර්ස්
source
16
කනගාටුවට කරුණක් නොවේ, CSS3 නව වර්ණ මොඩියුලය සමඟ මෙය නිවැරදි කිරීම ඉලක්ක කරයි, ඔබ වර්ණයක් සඳහන් කරන සෑම විටම ඇල්ෆා අගයක් නියම කිරීමට එය ඉඩ දෙයි. w3.org/TR/css3-color
— meandmycode
71
ඇත්ත වශයෙන්ම, ළමා මූලද්‍රව්‍යවල පාරාන්ධතාවය ගුණ කරනු ලබන්නේ මව් මූලද්‍රව්‍යයේ පාරාන්ධතාවයෙන් මිස ඉක්මවා නොයෑමෙනි. උදාහරණයක් ලෙස, pපාරාන්ධතාව .6සහ spanපාරාන්ධතාව .5නම්, පරතරයේ සත්‍ය පාරාන්ධතාව වනු ඇත 0.3.
— චාර්වි
1
අනුමාන කරන්න, නමුත් එය පාරභාසක පසුබිම බැවින් ඔබට පෙරණය / පාරාන්ධතාව පවා අවශ්‍ය නොවේ: codepen.io/anon/pen/ksJug
— Sanders
5
මාචර් opacity:.5සහ opacity:2ළමා අංගය සඳහා මා නිර්වචනය කළහොත් සිදුවිය යුත්තේ කුමක්ද?
— ඇලෙක්සැන්ඩර්
10
Lex ඇලෙක්සැන්ඩර්, ඔබ එම ප්‍රශ්නය ඇසීම ගැන මට සතුටුයි. ගණිතමය වශයෙන්, එක් දරුවා 1. ක පාරාන්ධතාව ආපසු නැවත කෙසේ වෙතත්, බව සැක කරන opacity:2;වන්නේ වලංගු CSS වේ . opacityදේපලෙහි වටිනාකම ඇතුළත් වන පරාසය තුළ තිබිය යුතුය [0,1].
— චාර්වි

Answers:

2277

එක්කෝ අර්ධ පාරදෘශ්‍ය 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>
ස්නිපටය පුළුල් කරන්න

— පීටර් මෝර්ටෙන්සන්
source
86
හෙක්ස් වර්ණවලින් මෙය කළ හැකිද? #Fff වගේද?
— grm
35
rgrm: W3C විසින් #RRGGBBAA හෙක්ස් කේත ආකෘතියක් හඳුන්වා දීම ගැන සලකා බැලූ නමුත් ඔවුන් තීරණය කළේ (විවිධ හේතු නිසා), එබැවින් අපට බැහැ.
— outis
95
@grm with SASS ඔබට පුළුවන්,background-color: rgba(#000, .5);
— පෝල්
2
ඔබට විනිවිදභාවය භාවිතා කිරීමට අවශ්‍ය නම්, RGBA සඳහා සහය දක්වන සෑම බ්‍රව්සරයක්ම HSLA සඳහා සහය දක්වයි , එය වඩාත් බුද්ධිමත් වර්ණ සිතියම්කරණයකි. IE8 යනු එයට සහාය දැක්වීමට අපොහොසත් වන එකම ව්‍යාජ බ්‍රව්සරයයි, එබැවින් ඉදිරියට ගොස් සෑම වර්ණයක් සඳහාම HSL (A) භාවිතා කරන්න.
— iono
19
@outis: ශුභ ආරංචියක්, #RRGGBBAA දැන් 4 වන මට්ටමේ පවතී .
— බෝල්ට්ලොක්
476

ෆයර්ෆොක්ස් 3 සහ සෆාරි 3 හි ඔබට සඳහන් කළ ජෝර්ජ් ෂෝලි වැනි RGBA භාවිතා කළ හැකිය .

ටිකක් දන්නා උපක්‍රමයක් නම් ඔබට එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි මෙන්ම ශ්‍රේණියේ පෙරණය භාවිතා කළ හැකිය.

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)";
}

මෙය RBSa සහ ෆිල්ටර හරහා ළමා මූලද්‍රව්‍යයන්ට බලපෑමක් නොකර CSS පසුබිම් විනිවිදභාවයෙන් .

ප්‍රති results ල පිළිබඳ තිර පිටපත්:

පහත කේතය භාවිතා කරන විට මෙය සිදු වේ: 

 <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

— ඇඩ්‍රියන් බී
source
1
නමුත් IE8 හි නොවේ. මම නව -ms- පෙරහන් සින්ටැක්ස් උත්සාහ කළ නමුත් එය තවමත් මට වැඩ කළේ නැත :(
— philfreo
5
මෙම පෝස්ට් එක IE8 හි එය කරන්නේ කෙසේදැයි පෙන්වයි: robertnyman.com/2010/01/11/…
— Slapout
14
ilphilfreo: ඔබ සෙබස්තියන්ගේ කේතයේ පළමු කොටස "පසුබිම: rgb (0, 0, 0) විනිවිද පෙනෙන" ලෙස වෙනස් කරන්නේ නම්; එය දැන් IE8 හි වැඩ කළ යුතුය. මෙය සෑහෙන කාලයක් තිස්සේ මට කරදරයක් විය!
— ටොම් චැන්ට්ලර්
filter: progid IE 9 සමඟ විශිෂ්ට ලෙස ක්‍රියා කරයි. වර්ණය: විනිවිදභාවය, රතු, කොළ, නිල් - ඉලක්කම් හෙක්ස් අගයන් දෙකම.
— Thorsten Niehues
1
D ඇඩ්‍රියන්බී - ඔබේ උපදෙස් අනුව මම ඔබේ පිළිතුර සංස්කරණය කළෙමි. අවාසනාවකට මම කාලයක් තිස්සේ මෙම විශේෂිත ප්‍රශ්නෝත්තරයේ හිස් අවකාශයෙන් බැහැරව සිටිමි, එබැවින් මට මේ අවස්ථාවේ මෙම සංවාදයට එක් කළ නොහැක.
— user664833
108

CSS 3 භාවිතා නොකොට මට ඉදිරිපත් කළ හැකි හොඳම විසඳුම මෙයයි. තවද එය මට පෙනෙන පරිදි ෆයර්ෆොක්ස්, ක්‍රෝම් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් වලද ක්‍රියා කරයි.

කන්ටේනරයක් 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>
ස්නිපටය පුළුල් කරන්න

— ගොර්කම් පකාසි
source
19
"පෙළ සහ පසුබිම එකිනෙකට ඉහලින් ස්ථානගත කර ඇති මූලද්‍රව්‍ය දෙකකින් වෙන් නොකර" යනුවෙන් ඔහු පැවසීය. කෙසේ වෙතත් ස්තූතියි, මෙය හොඳ විසඳුමක් වන අතර එය ප්‍රයෝජනවත් වේ, නමුත් සමහර අවස්ථාවලදී ඔබට අවශ්‍ය වන්නේ පාරාන්ධ මූලද්‍රව්‍යය අර්ධ පාරදෘශ්‍ය දරුවාගේ දරුවෙකු වීමයි.
— රොල්ෆ්
මම වෙනත් SO ප්‍රශ්නයකට බොහෝ දුරට පිළිතුරු දුන් නමුත් jsfiddle & screenhot proofs (IE7 +) එකතු කළෙමි, උනන්දුවක් දක්වන්නේ
— ඇඩ්‍රියන්
Or ගෝර්කම් පැකසි: පාරාන්ධතාවයේ ගුණාංග “සැබවින්ම” හරස් බ්‍රව්සරයක් බවට වග බලා ගන්න, ඔබට මෙම කේත ස්නිපටය CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
— ඇඩ්‍රියන්
වැනි ව්‍යාජ මූලද්‍රව්‍යයකින් එය :afterනොකර අතිරේක සලකුණු කිරීමෙන් වළකින්නේ ඇයි?
— ඇන්ඩ් ෆිෂර්
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>

පිටත කවුළු මූලද්‍රව්‍යයේ ඇතුළත “ස්ථර” දෙකක් භාවිතා කරමින් තාක්ෂණය ක්‍රියාත්මක වේ:

  • අන්තර්ගත ප්‍රවාහයට කිසිදු බලපෑමක් නොකර කවුළු මූලද්‍රව්‍යයේ ප්‍රමාණයට ගැලපෙන එකක් (“පිටුපස”),
  • සහ එකක් (“cont”) අන්තර්ගතය අඩංගු වන අතර කවුළුවෙහි ප්‍රමාණය තීරණය කිරීමට උපකාරී වේ.

මෙම 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;
}

ලියා ඇති පරිදි, මෙය ෆයර්ෆොක්ස්, සෆාරි, ක්‍රෝම්, අයිඊ 8 + සහ ඔපෙරා වල ක්‍රියා කරයි, අයිඊ 7 සහ අයිඊ 6 සඳහා අතිරේක සීඑස්එස් සහ ප්‍රකාශන අවශ්‍ය වුවද අයිආර්සී, අවසන් වරට මා පරීක්ෂා කළ විට දෙවන සීඑස්එස් විචලනය ඔපෙරා හි ක්‍රියා නොකරයි.

අවධානයෙන් සිටිය යුතු දේවල්:

  • සම ස්ථරයේ ඇතුළත පාවෙන මූලද්‍රව්‍ය අඩංගු නොවේ. ඒවා නිෂ්කාශනය වී ඇත්දැයි හෝ වෙනත් ආකාරයකින් අන්තර්ගත වී ඇති බවට ඔබට සහතික විය යුතුය, නැතහොත් ඒවා පහතින් ලිස්සා යනු ඇත.
  • ආන්තිකයන් කවුළු මූලද්‍රව්‍යය මතට යන අතර පෑඩින් කිරීම මූලද්‍රව්‍යයට යයි. ප්‍රතිවිරුද්ධ දෙය භාවිතා නොකරන්න (පිටුවේ මායිම් හෝ කවුළුවෙහි පෑඩින් කිරීම) හෝ පිටුව සෑම විටම බ්‍රව්සර් කවුළුවට වඩා තරමක් පළල් වීම වැනි අමුතුකම් ඔබ සොයා ගනු ඇත.
  • සඳහන් කළ පරිදි, සියල්ලම අවහිර කිරීම හෝ පේළිගත කිරීම අවශ්ය වේ. ඔබේ CSS සරල කිරීම සඳහා <div>s වෙනුවට s භාවිතා කිරීමට නිදහස් <span>වන්න.

සම්පුර්ණ නිරූපණයක්, මෙම තාක්‍ෂණය සමඟ නම්‍යශීලී බව පෙන්වමින් එය 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 තිර රුව

— ස්ලිප් ඩී. තොම්සන්
source
මේ සඳහා CSS3 භාවිතා කිරීමට කෙනෙකුට අවශ්‍ය නොවන්නේ කුමන තත්වයකද?
— බර්ක්ලි 91
@ බර්ක්ලි 91 ඔබට CSS3 හි එය කළ හැකි නම්, එය නියත වශයෙන්ම භාවිතා කරන්න. නමුත් CSS3 පසුබිම සියලු වර්ගවල අන්තර්ගතයන්ට හෝ සම්පූර්ණ පිරිසැලසුම් නම්‍යතාවයට සහාය නොදක්වයි. ස්වාධීනව පුනරාවර්තනය වන දාර සහ මධ්‍ය පිරවුම් (ය) නිසා ඉහත ලියුම් කවරය / අකුරු උදාහරණය CSS3 සමඟ ඇද ගැනීමට අපහසු වේ. CSS3 සහයෝගය පුළුල් වීමට පෙර මෙම පිළිතුර මුලින් ලියා ඇත්තේ මීට වසර 5 කට පෙර බව මතක තබා ගන්න.
— ස්ලිප් ඩී. තොම්සන්
2
G ඊගෝර් ඉවාන්චා ඔබේ වෙනස්කම් පෙරළා දැමීය. මට කණගාටුයි, මගේ කැමති පෝරමයෙන් (ටැබ්) ඔබේ (අවකාශ 2) වෙනස් කිරීම සිසිල් නොවේ. ඔබගේ එදිනෙදා කේත ව්‍යපෘතිවල 2-අභ්‍යවකාශ ඉන්ඩෙන්ටේෂන් භාවිතා කිරීමට ඔබට හොඳ හේතු තිබිය හැක, නමුත් වෙබයේ ඉදිරිපත් කිරීම සඳහා ටැබ් වලට පැහැදිලි ජයග්‍රහණයක් ඇතැයි මම විශ්වාස කරමි - ගැඹුරු ඉන්ඩෙන්ටේෂන් මඟින් ධූරාවලියේ මට්ටම් හඳුනා ගැනීම පහසු කරයි, එය බොහෝ දුරට ටැබ් විශ්වසනීයව අවකාශයට පරිවර්තනය කිරීම පහසු වන අතර එය සියලු පා .කයන්ගේ වඩාත් අනුකූල ආකාරයකි.
— ස්ලිප් ඩී. තොම්සන්
G ඊගෝර් ඉවාන්චා, ඔබ සෑම සීඑස්එස් තේරීම්කරුවෙකු සහ දේපලක්ම තමන්ගේම රේඛාවට ඇතුළත් කරන රූපලාවන්‍යකාරකයක් වුවද ඔබ කේතය ධාවනය කළ බව පෙනේ. මගේ උදාහරණ ලියා ඇත්තේ හිතාමතාම රේඛා බිඳීම් සහ පරතරය තාර්කිකව කණ්ඩායම් කොටස් වලට එකට තේරුම් ගත යුතු ය - උදා: බොහෝ width:සහ height:ගුණාංග රේඛාවක් බෙදාගන්නේ ඒවා එකම වර්ගයේ ඉදිකිරීම් සහ ද්විමාන හැඩයක් ලෙස වඩා හොඳින් වටහාගෙන ඇති නිසා මිස ද්විමාන හැඩයක් ලෙස නොවේ. 1-මාන සීමාවන් යුගලයක්. තවද, සමහර රේඛාවල සාධාරණ ප්‍රමාණයක් ඇසුරුම් කර ඇති බැවින් එය නැවත නැවත අන්තර්ගතය පෙන්වීමට එතරම් වැදගත් නොවේ.
— ස්ලිප් ඩී. තොම්සන්
G ඊගෝර් ඉවාන්චා තාර්කික සංවිධානය, කණ්ඩායම්කරණය සහ මෝස්තරය සෑම ආකාරයකම ලිවීමේදී මෙන් බුද්ධිමත්, තේරුම්ගත හැකි කේතයක් ලිවීමට අතිශයින්ම වැදගත්ය. ඔබ සිදු කළ වෙනස්කම් යමෙකු තනතුරකට ගොස් සියලු ඡේද බිඳීම් ඉවත් කිරීම හා එක් එක් වාක්‍යයෙන් පසුව බලහත්කාරයෙන් නව රේඛාවක් තැබීම හා සමාන වේ. ඔබ ඔබේම වැඩ කටයුතුවල නියැලීමට කැමති නම්, හොඳයි, ඔබට එසේ කිරීමට නිදහස තිබේ. නමුත් කරුණාකර අනෙක් අයගේ කාර්යයන්හි අර්ථකථන ස්වභාවය සහ ප්‍රකාශනය ගොළු නොකරන්න.
— ස්ලිප් ඩී. තොම්සන්
58

අර්ධ පාරදෘශ්‍ය භාවිතා කිරීම වඩා හොඳය.png .

Photoshop විවෘත කර , 2x2පික්සෙල් රූපයක් සාදන්න ( තේරීමෙන් 1x1ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් දෝෂයක් ඇතිවිය හැකිය! ), එය හරිත වර්ණයෙන් පුරවා “ලේයර් ටැබ්” හි පාරාන්ධතාව 60% දක්වා සකසන්න. ඉන්පසු එය සුරකිමින් එය පසුබිම් රූපයක් බවට පත් කරන්න:

<p style="background: url(green.png);">any text</p>

සුන්දර ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 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');
}
— ප්රජා
source
54

සලකුණු කිරීම අවම කිරීම සඳහා උපක්‍රමයක් ඇත: පසුබිමක් ලෙස ව්‍යාජ මූලද්‍රව්‍යයක් භාවිතා කරන්න , ප්‍රධාන අංගයට සහ එහි දරුවන්ට කිසිදු බලපෑමක් නොකර ඔබට එයට පාරාන්ධතාවය සැකසිය හැකිය:

ඩෙමෝ

ප්‍රතිදානය:

ව්‍යාජ මූලද්‍රව්‍යයක් සහිත පසුබිම් පාරාන්ධතාව

අදාළ කේතය:

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>
ස්නිපටය පුළුල් කරන්න

බ්‍රව්සර් සහාය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 සහ ඊට පසුව ය.

— වෙබ්-ටිකි
source
23

පහසුම ක්‍රමය වනුයේ අර්ධ විනිවිද පෙනෙන පසුබිමක් සහිත PNG රූපයක් භාවිතා කිරීමයි.

ඔබට අවශ්‍ය නම් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 හි එය ක්‍රියාත්මක කිරීමට ඔබට ජාවාස්ක්‍රිප්ට් භාවිතා කළ හැකිය .

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 හි විනිවිද පෙනෙන පීඑන්ජී හි දක්වා ඇති ක්‍රමය මම භාවිතා කරමි .

ඒ හැරුණු විට, ඔබට එය දෙපැත්තෙන්ම සහෝදර සහෝදරියන් දෙදෙනෙකු භාවිතා කර ව්‍යාජ කළ හැකිය - එක් අර්ධ පාරදෘශ්‍ය කරන්න , ඉන්පසු අනෙකා ඉහළින් ස්ථානගත කරන්න .

— ක්‍රිස්
source
2
මට අවශ්‍ය වන්නේ සරල පසුබිම් වර්ණයක් පමණි, මෙම වර්ණයෙන් මා නිර්මාණය කිරීමට යෝජනා කරන පීඑන්ජී ප්‍රමාණය කුමක්ද? 1x1 මඟින් විදැහුම්කරණය විශාල වැඩ කොටසක් කරනු ඇත, ඕනෑවට වඩා පික්සෙල් මඟින් මෙම පීඑන්ජී ඉතා විශාල කරයි (සම්පීඩිත බැවින් ගොනු ප්‍රමාණයෙන් යුක්ත විය යුතුය, නමුත් තවමත් විදැහුම්කරණය එය භාවිතා කිරීම සඳහා එය සම්පීඩනය කළ යුතුය) ...
— ස්ටිජන් සැන්ඩර්ස්
3
මම 30px x 30px වැනි දෙයක් නිර්දේශ කරමි, එය 1x1 ට වඩා පුනරාවර්තනය කිරීමේදී අඩු මතකයක් භාවිතා කරන අතර කලාප පළල භාවිතය අවම කිරීමට තවමත් කුඩාය.
— ක්‍රිස්
21

මෙම ක්‍රමය මඟින් ඔබට image න වර්ණයක් පමණක් නොව පසුබිමක රූපයක් තබා ගැනීමට ඉඩ ලබා දෙන අතර දේශසීමා වැනි වෙනත් ගුණාංගවල විනිවිදභාවයක් ඇති කිරීමට භාවිතා කළ හැකිය. විනිවිද පෙනෙන PNG රූප අවශ්‍ය නොවේ.

CSS හි :before(හෝ :after) භාවිතා කර මූලද්‍රව්‍යය එහි මුල් පාරාන්ධතාවයේ තැබීමට ඔවුන්ට පාරාන්ධතා අගය ලබා දෙන්න. මේ අනුව ඔබට භාවිතා කළ හැකිය: ව්‍යාජ මූලද්‍රව්‍යයක් සෑදීමට පෙර සහ ඔබට අවශ්‍ය විනිවිද පෙනෙන පසුබිම (හෝ මායිම්) ලබා දී ඔබට පාරාන්ධව තබා ගැනීමට අවශ්‍ය අන්තර්ගතය පිටුපස එය ගෙනයන්න.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(ශුන්‍යයේ අගයන් හෝ ඔබේ අවශ්‍යතා සඳහා වඩාත් සුදුසු ඕනෑම දෙයක් භාවිතා කරන්න).

— frozenkoi
source
17

ප්රශ්නය පෙළ ඇත්තටම එය, ඇති ඔබේ ආදර්ශය පූර්ණ පාරාන්ධතාව. pටැගය තුළ එය සම්පූර්ණ පාරාන්ධතාවයක් ඇත , නමුත් pටැගය අර්ධ පාරදෘශ්‍ය ය.

ඔබට CSS හි අවබෝධ කර ගැනීම වෙනුවට අර්ධ පාරදෘශ්‍ය PNG පසුබිම් රූපයක් එක් කළ හැකිය, නැතහොත් පෙළ හා කොටස් කොටස් දෙකකට වෙන් කොට පෙළ කොටුව හරහා ගෙන යා හැකිය (නිදසුනක් ලෙස negative ණ ආන්තිකය).

එසේ නොමැති නම් එය කළ නොහැකි වනු ඇත.

ක්‍රිස් සඳහන් කළ ආකාරයටම: ඔබ විනිවිදභාවයකින් යුත් පීඑන්ජී ගොනුවක් භාවිතා කරන්නේ නම්, එය කරදරකාරී ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි වැඩ කිරීමට ජාවාස්ක්‍රිප්ට් ක්‍රියාමාර්ගයක් භාවිතා කළ යුතුය ...

— ස්වෙන්ෆින්කේ
source
15

මෙම පිළිතුරු සියල්ලම පාහේ උපකල්පනය කරන්නේ නිර්මාණකරුට color න වර්ණ පසුබිමක් අවශ්‍ය බවයි. නිර්මාණකරුට සැබවින්ම පසුබිමක් ලෙස ඡායාරූපයක් අවශ්‍ය නම්, මේ මොහොතේ ඇති එකම සැබෑ විසඳුම වෙනත් තැනක සඳහන් කර ඇති jQuery Transify ප්ලගිනය වැනි JavaScript ය .

අප කළ යුත්තේ CSS ක්‍රියාකාරී කණ්ඩායම් සාකච්ඡාවට සම්බන්ධ වී ඔවුන් අපට පසුබිම්-පාරාන්ධතාවයේ ලක්ෂණයක් ලබා දීමයි! එය බහු-පසුබිම් අංගය සමඟ අත්වැල් බැඳගෙන ක්‍රියා කළ යුතුය.

— සිහින් සොල්දාදුවා
source
14

මෙන්න මම මෙය කරන ආකාරය (එය ප්‍රශස්ත නොවිය හැකි නමුත් එය ක්‍රියාත්මක වේ):

divඔබට අර්ධ පාරදෘශ්‍ය වීමට අවශ්‍ය දේ සාදන්න . එයට පන්තියක් / හැඳුනුම්පතක් දෙන්න. එය හිස්ව තබා එය වසා දමන්න. එයට නියම උස සහ පළල දෙන්න (කියන්න, පික්සල් 300 කින් පික්සල් 300 කින්). එයට 0.5 පාරාන්ධතාවයක් හෝ ඔබ කැමති ඕනෑම දෙයක් සහ පසුබිම් වර්ණයක් දෙන්න.

ඉන්පසු, එම කොට් div ාශයට කෙලින්ම පහළින් , වෙනත් පංතියක් / හැඳුනුම්පතක් සහිත තවත් අංශයක් සාදන්න. එය තුළ ඡේදයක් සාදන්න, එහිදී ඔබ ඔබේ පෙළ තබනු ඇත. divපිහිටීම දෙන්න : සාපේක්ෂ සහ ඉහළ: -295px(එය negative ණ පික්සල් 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>
ස්නිපටය පුළුල් කරන්න

මෙය සෆාරි 2.x හි ක්‍රියාත්මක වේ, නමුත් මම ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් ගැන නොදනිමි.

— paris ionescu
source
අමතර මූලද්‍රව්‍යය වළක්වා ගත හැකි අතර ඒ වෙනුවට ව්‍යාජ මූලද්‍රව්‍යයක් භාවිතා කරන්න :beforeහෝ:after
— frozenkoi
12

මෙන්න ඔබ වෙනුවෙන් සෑම දෙයක්ම හැසිරවිය හැකි jQuery ප්ලගිනයක්, Transify ( Transify - මූලද්‍රව්‍යයක පසුබිමට විනිවිදභාවය / පාරාන්ධතාව පහසුවෙන් යෙදිය හැකි jQuery ප්ලගිනයක් ).

මම හැම වෙලාවෙම මේ ප්‍රශ්නයට දුවගෙන ආවා, ඒ නිසා ජීවිතය පහසු කරවන දෙයක් ලිවීමට මම තීරණය කළා. ස්ක්‍රිප්ට් එක 2 KB ට වඩා අඩු වන අතර එය ක්‍රියාත්මක වීමට එක් කේත පේළියක් පමණක් අවශ්‍ය වන අතර, ඔබ කැමති නම් පසුබිමේ පාරාන්ධතාව සජීවිකරණය කිරීමට ද එය කටයුතු කරයි.

— ජෝර්න්
source
11

ටික වේලාවකට පසු, මම මේ ගැන හරස් බ්‍රව්සර් පසුබිම් විනිවිදභාවය සමඟ CSS සමඟ ලිව්වෙමි .

විකාරරූපී ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 මඟින් පසුබිම විනිවිද පෙනෙන බවට පත් කිරීමටත්, පෙළ සම්පූර්ණයෙන්ම පාරාන්ධව තබා ගැනීමටත් ඉඩ සලසයි. අනෙක් බ්‍රව්සර් සඳහා විනිවිද පෙනෙන PNG ගොනුවක් භාවිතා කිරීමට මම යෝජනා කරමි.

— ෆිල්නාෂ්
source
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
source
8

මූලද්‍රව්‍යයක පසුබිම අර්ධ පාරදෘශ්‍ය බවට පත් කිරීම සඳහා, නමුත් මූලද්‍රව්‍ය පාරාන්ධතාවයේ අන්තර්ගතය (පෙළ සහ රූප) ලබා ගැනීම සඳහා, ඔබ එම රූපය සඳහා CSS කේතය ලිවිය යුතු opacityඅතර අවම අගයක් සහිත එක් ගුණාංගයක් එක් කළ යුතුය.

උදාහරණයක් වශයෙන්,

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

// වටිනාකම කුඩා වන තරමට එය විනිවිද පෙනෙන අතර ලෝපස් අගය අඩු විනිවිදභාවයකින් යුක්ත වේ.

— පුෂ්ප් සිං
source
මෙය නවීන බ්‍රව්සර් තුළ කළ හැකි එක් ක්‍රමයකි. මම එය rgba අගයන් සමඟ පසුබෑමක් ලෙස ඒකාබද්ධ කරමි
— කාලිඩ්
ඔව්, නිවැරදි කරන්න. නවීන බ්‍රව්සරය සමඟ කටයුතු කිරීමට මෙය එක් ක්‍රමයකි.
— පුෂ් සිං
"ලෝපස් අගය අඩු විනිවිදභාවයකින් යුක්ත වනු ඇත" (එය තේරුම්ගත නොහැකි බව පෙනේ) යන්නෙන් ඔබ අදහස් කරන්නේ කුමක්ද? ( සුදුසු නම් ඔබේ පිළිතුර සංස්කරණය කිරීමෙන් ප්‍රතිචාර දක්වන්න .)
— පීටර් මෝර්ටෙන්සන්
7

CSS 3 ඔබේ ගැටලුවට පහසු විසඳුමක් ඇත. භාවිත:

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

මෙන්න, rgbaරතු, කොළ, නිල් සහ ඇල්ෆා අගය නියෝජනය කරයි. හරිත අගය 255 නිසා ලබා ගන්නා අතර අර්ධ විනිවිදභාවය 0.5 ඇල්ෆා අගයකින් ලබා ගනී.

— ටූහිඩ් රහ්මාන්
source
මෙය පෙර සමහර පිළිතුරු වලට වඩා වෙනස් වන්නේ කෙසේද?
— පීටර් මෝර්ටෙන්සන්
6

background-color: rgba (255, 0, 0, 0.5); ඉහත සඳහන් කළ පරිදි සරලව කිව හැකි හොඳම පිළිතුරයි. CSS 3 භාවිතා කිරීම 2013 දී පවා සරල නැත, මන්ද විවිධ බ්‍රව්සර්වල ආධාරක මට්ටම සෑම ක්‍රියාවලියක් සමඟම වෙනස් වේ.

අතර background-colorසියලු ප්රධාන බ්රවුසර (CSS 3 අලුත් දෙයක්) [1] විසින් ආධාර කරනු ලබයි ඇල්ෆා විනිවිද අනුවාදය 9 පෙර සහ 5.1 අනුවාදයට පෙර සෆාරි මත මායිම් සඳහා වර්ණය සමඟ විශේෂයෙන් Internet Explorer සමග, ලේසියෙන්ම බලාගන්න පුළුවන්. [2]

වගේ දෙයක් භාවිතා Compass හෝ සාස් සැබවින්ම නිෂ්පාදනයට සහ හරස් වේදිකා අනුකූලතාවයට උපකාරී වේ.

[1] W3 පාසල්: CSS පසුබිම් වර්ණ දේපල

[2] නෝමන්ගේ බ්ලොගය: බ්‍රව්සර් ආධාරක පිරික්සුම් ලැයිස්තුව CSS3 (2012 ඔක්තෝබර්)

— විල් නීල්සන්
source
4

ඔබට ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 සඳහා (ab) ශ්‍රේණියේ වාක්‍ය ඛණ්ඩය භාවිතා කර විසඳිය හැකිය . වර්ණ ආකෘතිය ARGB වේ. ඔබ Sass preprocessor භාවිතා කරන්නේ නම් ඔබට "එනම්-hex-str ()" යන ශ්‍රිතය භාවිතයෙන් වර්ණ පරිවර්තනය කළ හැකිය.

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
— හෙන්රික්
source
4

ඔබ පිරිසිදු භාවිතා කළ හැකිය CSS 3 : rgba(red, green, blue, alpha), කොහෙදalpha ඔබට අවශ්‍ය විනිවිදභාවයේ මට්ටම ? JavaScript හෝ jQuery අවශ්‍ය නොවේ.

මෙන්න උදාහරණයක්:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
— පීටර් මෝර්ටෙන්සන්
source
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
source
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>
ස්නිපටය පුළුල් කරන්න

— රුද්‍රා
source
1

එකම කොටසට රූපයක් උඩින් ආවරණයක් තැබීමට පහසු විසඳුමක් තිබේ. මෙම මෙවලම නිවැරදිව භාවිතා කිරීම නොවේ. නමුත් CSS භාවිතයෙන් එම ආවරණයක් සෑදීම සඳහා චාම් එකක් මෙන් ක්‍රියා කරයි.

මේ වගේ සෙවනැලි භාවිතා කරන්න:

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

එච්චරයි :)

— edd2110
source
1

CSS හි ඔබට RGBA භාවිතා කළ හැකිය . මේ වගේ දෙයක්:(red, green, blue, alpha)

එබැවින් මේ වගේ දෙයක් කිරීම ඔබේ නඩුවේදී සාර්ථක වනු ඇත:

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

span {
  color: white;
}
— අලිරේසා
source
1

මගේ දෘෂ්ටි කෝණයට අනුව, පාරාන්ධතාවයෙන් පසුබිම් වර්ණයක් භාවිතා කිරීමට හොඳම ක්‍රමය පහත පරිදි වේ. අප මෙය භාවිතා කරන්නේ නම්, පරීක්ෂණ වර්ණය, මායිම යනාදිය වැනි අනෙකුත් මූලද්‍රව්‍ය සඳහා පාරාන්ධතාව අපට අහිමි නොවේ.

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

පාරාන්ධතාවයෙන් පසුබිම් වර්ණය භාවිතා කරන්න

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

රූප විස්තරය මෙහි ඇතුළත් කරන්න

— විනෝද් කුමාර්
source
1

ෂඩාස්රාකාර අගයට එකතු කර ඇති පාරාන්ධතා අගය ඔබට භාවිතා කළ හැකිය:

background-color: #11ffeeaa;

මෙම උදාහරණයේ aaදී පාරාන්ධතාවය වේ. පාරදෘශ්‍යතාව 00යනු පාරදෘශ්‍ය වන අතර ffsolid න වර්ණය අදහස් කරයි.

පාරාන්ධතාවය අත්‍යවශ්‍ය නොවේ, එබැවින් ඔබට සෑම විටම ෂඩාස්රාකාර අගය භාවිතා කළ හැකිය:

background-color: #11ffee;

ඔබට පැරණි ක්‍රමයද භාවිතා කළ හැකිය rgba():

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

සහ backgroundඔබ පසුබිම ඡායාරූප හෝ අනුක්රම වැනි වෙනත් කිසිදු මෝස්තර, වන බවට වග බලා බව සිදු කිරීමට අවශ්ය නම්, කිමෙක්ද යන්න සාරාංශ:

background: #11ffeeaa;

මොසිල්ලා හි පිරිවිතරයෙන් ( 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
source
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 */
}
ස්නිපටය පුළුල් කරන්න

— සෙන්ගුරු මයිකල්
source
0

ආකෘතිය භාවිතා කරන විට එය මට වැඩ කළ නිසා මා වෙනුවෙන් #AARRGGBBවැඩ කරන තැනැත්තා විය #1C00ff00. එය උත්සාහ කර බලන්න, මන්ද එය සමහරුන්ට වැඩ කරන බවත් වෙනත් කෙනෙකු වෙනුවෙන් වැඩ නොකරන බවත් මම දැක ඇත්තෙමි. මම එය CSS හි භාවිතා කරමි.

— ඩොනල්ඩ් ෂහිනි
source
-2

ඔබට RGB (63, 245, 0) හි වර්ණ කේතයක් වැනි පාරාන්ධතාවයෙන් RGB වර්ණය භාවිතා කළ හැකි අතර පාරාන්ධතාව (63, 245, 0, 0.5 වැනි) එකතු කළ හැකි අතර RGB වෙනුවට RGBA ආදේශ කරන්න. Aපාරාන්ධතාව සඳහා භාවිතා කිරීමට නියමිතය.

div {
  background: rgba(63, 245, 0, 0.5);
}
ස්නිපටය පුළුල් කරන්න

— විජේ ෂර්මා
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.