CSS kullanarak metne veya g├Âr├╝nt├╝ye saydam bir arka plan nas─▒l verebilirim?


Al─▒nan cevaba git


background ├ľ─čeyi yar─▒ saydam yapmak, ancak ├Â─čenin i├žeri─čini (metin ve resimler) opak yapmak m├╝mk├╝n, yaln─▒zca CSS kullanarak m├╝mk├╝n m├╝ ?

Bunu, metni ve arkaplan─▒ iki ayr─▒ eleman olmadan elde etmek istiyorum.

├çal─▒┼č─▒rken:

 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> 

Alt ├Â─čeler, ebeveynlerinin opakl─▒─č─▒na maruz kal─▒yor gibi g├Âr├╝n├╝yor, bu y├╝zden ebeveynin opacity:1 g├Âreceli opacity:0.6 .


2194









Cevap say─▒s─▒n─▒ say: 28






Yar─▒ saydam bir PNG resmi kullan─▒n veya CSS 3'├╝ kullan─▒n:

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

─░┼čte css3.info, Opacity, RGBA ve uzla┼čmadan bir makale (2007-06-03).


 <p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p> 


2228







Firefox 3 ve Safari 3'te, RGBA'y─▒ Georg Sch├Âlly'nin bahsetti─či gibi kullanabilirsiniz .

Bilinen bir p├╝f noktas─▒, Internet Explorer'da degrade filtresini kullanarak kullanabilmenizdir.

 background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
 

─░lk onalt─▒l─▒k say─▒ rengin alfa de─čerini tan─▒mlar.

T├╝m taray─▒c─▒lar i├žin tam ├ž├Âz├╝m:

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

Bu, alt unsurlar─▒ etkilemeden, RGBa ve filtreler arac─▒l─▒─č─▒yla CSS arka plan saydaml─▒─č─▒ndand─▒r .

Ekran g├Âr├╝nt├╝leri kan─▒t─▒:

Bu, a┼ča─č─▒daki kodu kullan─▒rken:

  <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>
 


Krom-33


IE11


IE9


IE8


470







Bu, CSS 3'├╝ kullanmad─▒─č─▒m i├žin bulabilece─čim en iyi ├ž├Âz├╝m. Ve g├Ârd├╝─č├╝m kadar─▒yla Firefox, Chrome ve Internet Explorer'da da harika ├žal─▒┼č─▒yor.

Bir DIV kab─▒n─▒ ve iki alt DIV'yi ayn─▒ seviyede, biri i├žerik i├žin, biri de arka plan i├žin yerle┼čtirin. Ve CSS kullanarak, i├žeri─či s─▒─čd─▒rmak i├žin arka plan─▒ otomatik olarak boyutland─▒r─▒n ve arka plan─▒ gerisini z-index kullanarak arkaya yerle┼čtirin.

 .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> 


104







Basit bir yar─▒ saydam arka plan rengi i├žin yukar─▒daki ├ž├Âz├╝mler (CSS 3 veya arka plan g├Âr├╝nt├╝leri) en iyi se├ženeklerdir. Ancak, merakl─▒s─▒ bir ┼čey yapmak istiyorsan─▒z (├Ârn. Animasyon, ├žoklu arka planlar, vb.) Veya CSS 3'e g├╝venmek istemiyorsan─▒z, ÔÇťb├Âlme tekni─činiÔÇŁ deneyebilirsiniz:

 .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>
 

Teknik, d─▒┼č panel eleman─▒n─▒n i├žinde iki "katman" kullanarak ├žal─▒┼č─▒r:

  • i├žeri─čin ak─▒┼č─▒n─▒ etkilemeden b├Âlme eleman─▒n─▒n boyutuna uyan bir tane ("geri"),
  • ve i├žeri─či i├žeren ve b├Âlmenin boyutunu belirlemeye yard─▒mc─▒ olan bir tane (ÔÇťdevam─▒ÔÇŁ).

A├ž─▒k position: relative b├Âlmede ├Ânemlidir; panelin boyutuna uymas─▒ i├žin arka katman─▒ s├Âyler. (E─čer gerekiyorsa <p> mutlak olmas─▒ etiketi, bir panelinden de─či┼čtirmek <p> bir etmek <span> ve t├╝m sar─▒n bir kesinlikle konumlu bu <p> etiketi.)

Bu tekni─čin yukar─▒da listelenenlere k─▒yasla temel avantaj─▒, b├Âlmenin belirtilen bir boyutta olmas─▒ gerekmemesidir; Yukar─▒da kodland─▒─č─▒ gibi, tam geni┼čli─če (normal blok eleman d├╝zeni) s─▒─čacak ve yaln─▒zca i├žerik kadar y├╝ksek olacakt─▒r. D─▒┼č panel eleman─▒, istedi─činiz s├╝rece, dikd├Ârtgen oldu─ču s├╝rece (yani sat─▒r i├ži blok ├žal─▒┼čacak; d├╝z eski sat─▒r i├ži ├žal─▒┼čmayacak) boyutland─▒r─▒labilir.

Ayr─▒ca, arka plan i├žin size ├žok fazla ├Âzg├╝rl├╝k verir; arka ├Â─čeye ger├žekten bir ┼čey koymakta ├Âzg├╝rs├╝n├╝z ve i├žeri─čin ak─▒┼č─▒n─▒ etkilemiyorsa (birden ├žok tam boyutlu alt katman istiyorsan─▒z, ayn─▒ zamanda konumlar─▒n─▒n da oldu─čundan emin olun: mutlak, geni┼člik / y├╝kseklik:% 100, ve ├╝st / alt / sol / sa─č: otomatik).

Arkaplan i├ž ayar─▒n─▒n yap─▒lmas─▒na izin veren bir de─či┼čiklik (├╝st / alt / sol / sa─č) ve / veya arka plan sabitlemenin (sol / sa─č veya ├╝st / alt ├žiftlerden birinin ├ž─▒kar─▒lmas─▒yla) bunun yerine a┼ča─č─▒daki CSS kullan─▒lmas─▒d─▒r:

 .pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}
 

Yaz─▒ld─▒─č─▒ gibi, bu Firefox, Safari, Chrome, Internet Explorer 8 (ve ├╝st├╝) ve OperaÔÇÖda ├žal─▒┼č─▒r, ancak Internet Explorer 7 ve Internet Explorer 6ÔÇÖda ekstra CSS ve ifadeler, IIRC ve en son kontrol etti─čimde, ikinci CSS varyasyonu Opera'da ├žal─▒┼čm─▒yor

Dikkat edilmesi gerekenler:

  • Cont katman─▒n─▒n i├žinde y├╝zen elemanlar bulunmayacakt─▒r. Bunlar─▒n temizlendi─činden veya ba┼čka bir ┼čekilde i├žerildi─činden emin olman─▒z veya alttan kaymalar─▒ gerekir.
  • Kenar bo┼čluklar─▒ b├Âlme eleman─▒na gider ve doldurma cont eleman─▒na gider. Tersini kullanmay─▒n (devamdaki kenar bo┼čluklar─▒ ya da b├Âlmede dolgu) veya sayfa her zaman taray─▒c─▒ penceresinden biraz daha geni┼č olmas─▒ gibi tuhafl─▒klar ke┼čfedeceksiniz.
  • Belirtildi─či gibi, her ┼čey blok veya sat─▒r i├ži blok olmal─▒d─▒r. CSS'nizi basitle┼čtirmek i├žin <div> s yerine <span> s'yi kullanmaktan ├žekinmeyin .

Daha dolu bir demo, bu tekni─čin esnekli─čini, display: inline-block her iki auto & spesifik width s / min-height s ile ayn─▒ ├žizgide kullanarak g├Âsterme :

 .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> 

Ve burada yo─čun olarak kullan─▒lan tekni─čin canl─▒ bir demo :


christmas-card-2009.slippyd.com ekran g├Âr├╝nt├╝s├╝


61







Yar─▒ saydam kullanmak daha iyidir .png .

Sadece Photoshop'u a├ž─▒n , bir 2x2 piksel resmi olu┼čturun ( toplama 1x1 bir Internet Explorer hatas─▒na neden olabilir! ), Ye┼čil renkle doldurun ve opakl─▒─č─▒ "Katmanlar sekmesinde"% 60 olarak ayarlay─▒n. Sonra kaydedin ve arkaplan resmi yap─▒n:

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

G├╝zel Internet Explorer 6 d─▒┼č─▒nda elbette g├╝zel ├žal─▒┼č─▒r . Daha iyi d├╝zeltmeler var, ancak i┼čte h─▒zl─▒ca kesmek:

 p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
 

56


2009-04-30





─░┼čaretlemeyi en aza indirecek bir hile var: Arka plan olarak sahte bir ├Â─če kullan─▒n ; ana ├Â─čeyi ve ├žocuklar─▒n─▒ etkilemeden opakl─▒─č─▒ ayarlayabilirsiniz:

DEMO

Çıktı:


Bir s├Âzde unsur ile arka plan opakl─▒─č─▒

─░lgili 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> 

Taray─▒c─▒ deste─či, Internet Explorer 8 ve ├╝st├╝d├╝r.


53







En kolay y├Ântem yar─▒ saydam bir arka plan PNG g├Âr├╝nt├╝s├╝ kullanmak olacakt─▒r .

Gerekirse , Internet Explorer 6'da ├žal─▒┼čmas─▒ i├žin JavaScript'i kullanabilirsiniz .

Internet Explorer 6'da ┼×effaf PNG'lerde belirtilen y├Ântemi kullan─▒yorum .

Bunun d─▒┼č─▒nda, yan yana iki karde┼č eleman kullanarak sahte olabilir - bir yar─▒ saydam hale getirir , sonra di─čerini kesinlikle ├╝ste yerle┼čtirirsiniz .


23







Bu y├Ântem, arka planda bir g├Âr├╝nt├╝ye sahip olman─▒za izin verir, yaln─▒zca d├╝z bir renk de─čildir ve kenarl─▒klar gibi di─čer ├Âzniteliklerde ┼čeffafl─▒─ča sahip olmak i├žin kullan─▒labilir. ┼×effaf PNG g├Âr├╝nt├╝s├╝ gerekmez.

CSS'de :before (veya :after ) kullan─▒n ve ├Â─čeyi orijinal opakl─▒─č─▒nda b─▒rakmalar─▒ i├žin opakl─▒k de─čeri verin. B├Âylece ┼čunlar─▒ kullanabilirsiniz: sahte bir ├Â─če olu┼čturmadan ├Ânce ve ona istedi─činiz ┼čeffaf arka plan─▒ (veya s─▒n─▒rlar─▒) verin ve opak tutmak istedi─činiz i├žeri─čin arkas─▒na ta┼č─▒y─▒n z-index .

Bir ├Ârnek ( keman ) ( DIV with with class'─▒n dad sadece renklerle ilgili bir miktar kontrast ve kontrast sa─člamak oldu─čunu, bu ekstra elementin asl─▒nda gerekli olmad─▒─č─▒n─▒ ve k─▒rm─▒z─▒ dikd├Ârtgenin biraz a┼ča─č─▒ ve arkas─▒ndaki arka plan─▒ g├Âr├╝n├╝r b─▒rakmak i├žin sa─ča ta┼č─▒nd─▒─č─▒n─▒ not edin. fancyBg ├Â─česi):

 <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>
 

bu CSS ile:

 .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;
}
 

Bu durumda .fancyBg:before , saydaml─▒kla sahip olmak istedi─činiz CSS ├Âzelliklerine sahiptir (bu ├Ârnekte k─▒rm─▒z─▒ arka plan, ancak bir g├Âr├╝nt├╝ veya kenarl─▒klar olabilir). Geride ta┼č─▒mak i├žin mutlak olarak konumland─▒r─▒lm─▒┼čt─▒r .fancyBg (s─▒f─▒r de─čerini veya ihtiya├žlar─▒n─▒z i├žin daha uygun olan─▒ kullan─▒n).


21







Sorun metin asl─▒nda yani, sahip sizin ├Ârnekte tam olarak kapatmas─▒. p Etiketin i├žinde tam opakl─▒─ča sahiptir , ancak p etiket sadece yar─▒ saydamd─▒r.

CSS'de ger├žekle┼čtirmek yerine yar─▒ saydam bir PNG arka plan g├Âr├╝nt├╝s├╝ ekleyebilir veya metni ve div'i iki ├Â─čeye ay─▒rabilir ve metni kutunun ├╝zerine ta┼č─▒yabilirsiniz (├Ârne─čin, negatif kenar bo┼člu─ču).

Aksi takdirde m├╝mk├╝n olmaz.

Chris'in dedi─či gibi: Saydaml─▒─č─▒ olan bir PNG dosyas─▒ kullan─▒yorsan─▒z, sinir bozucu Internet ExplorerÔÇÖda ├žal─▒┼čmas─▒ i├žin bir JavaScript ge├žici ├ž├Âz├╝m├╝ kullanman─▒z gerekir ...


17







Neredeyse b├╝t├╝n bu cevaplar tasar─▒mc─▒n─▒n d├╝z bir renk arka plan─▒ istedi─čini varsayar. Tasar─▒mc─▒ asl─▒nda bir arka plan olarak bir foto─čraf istiyorsa, ┼ču anda tek ger├žek ├ž├Âz├╝m, ba┼čka bir yerde bahsedilen jQuery Transify eklentisi gibi JavaScript'tir .

Yapmam─▒z gereken, CSS ├žal─▒┼čma grubu tart─▒┼čmas─▒na kat─▒lmak ve bize arka plan opakl─▒─č─▒ niteli─či kazand─▒rmakt─▒r! ├çoklu arka plan ├Âzelli─či ile el ele ├žal─▒┼čmas─▒ gerekir.


15







─░┼čte bunu nas─▒l yap─▒yorum (en uygun olmayabilir, ama i┼če yar─▒yor):

div Yar─▒ saydam olmak istedi─činizi olu┼čturun . Bir s─▒n─▒f / kimlik verin. Bo┼č b─▒rak─▒n ve kapat─▒n. Ayarlanm─▒┼č bir y├╝kseklik ve geni┼člik verin (├Ârne─čin, 300 piksele 300 piksel). 0.5'lik bir opakl─▒k veya ne istersen, arkaplan rengini ver.

Ard─▒ndan, do─črudan bu div'in alt─▒nda , farkl─▒ bir s─▒n─▒f / kimli─če sahip ba┼čka bir div olu┼čturun. ─░├žinde metninizi yerle┼čtirece─činiz bir paragraf olu┼čturun. div Konum ver : g├Âreceli ve ├╝st: -295px ( negatif 295 piksel). ─░yi bir ├Âl├ž├╝m i├žin 2 z-indeksi verin ve opakl─▒─č─▒n─▒n 1 oldu─čundan emin olun. Paragraf─▒n─▒za istedi─činiz gibi stil verin, ancak boyutlar─▒n ilk div ta┼čandan daha k├╝├ž├╝k oldu─čundan emin olun, b├Âylece ta┼čma yapmaz.

Bu kadar. ─░┼čte kod:

 .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> 

Bu Safari 2.x'te ├žal─▒┼č─▒r, ancak Internet Explorer'─▒ bilmiyorum.


13







─░┼čte sizin i├žin her ┼čeyi idare edecek bir jQuery eklentisi, Transify ( Transify - bir eleman─▒n arka plan─▒na kolayca saydaml─▒k / opakl─▒k uygulamak i├žin bir jQuery eklentisi ).

Her zaman bu soruna rastl─▒yordum, bu y├╝zden hayat─▒ ├žok kolayla┼čt─▒racak bir ┼čeyler yazmaya karar verdim. Komut 2 KB'den daha k├╝├ž├╝kt├╝r ve ├žal─▒┼čmas─▒n─▒ sa─člamak i├žin yaln─▒zca bir sat─▒r kod gerektirir ve isterseniz arka plan─▒n opakl─▒─č─▒n─▒ da canland─▒r─▒r.


12







Arka plan─▒n opakl─▒─č─▒, ancak metnin baz─▒ fikirleri yoktur. Yar─▒ saydam bir g├Âr├╝nt├╝ kullan─▒n veya ek bir ├Â─čenin ├╝zerine yerle┼čtirin.


10







Bir s├╝re ├Ânce, bu konuda CSS ile ├çapraz Taray─▒c─▒ Arka Plan ┼×effafl─▒─č─▒'n─▒ yazd─▒m .

Garip bir ┼čekilde Internet Explorer 6, arka plan─▒ saydamla┼čt─▒rman─▒za ve metni tam olarak opak tutman─▒za izin verir. Di─čer taray─▒c─▒lar i├žin ┼čeffaf bir PNG dosyas─▒ kullanman─▒z─▒ ├Âneririm.


10







E─čer bir ise Photoshop adam, ayr─▒ca kullanabilirsiniz:

  #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }
 

Veya:

 #some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
 

9







Bir ├Â─čenin arka plan─▒n─▒ yar─▒ saydam yapmak, ancak ├Â─čenin opak i├žeri─čine (metin ve g├Âr├╝nt├╝) sahip olmak i├žin, bu g├Âr├╝nt├╝ i├žin CSS kodu yazman─▒z gerekir ve opacity minimum de─čerle adland─▒r─▒lan bir ├Âzellik eklemeniz gerekir .

├ľrne─čin,

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

// De─čer ne kadar k├╝├ž├╝k olursa, o kadar ┼čeffaf olur, de─čer o kadar az ┼čeffaf olur.


8







arkaplan rengi: rgba (255, 0, 0, 0.5); Yukar─▒da belirtildi─či gibi basit├že koymak en iyi cevapt─▒r. CSS 3'├╝ 2013'te bile kullanmak pek de kolay de─čil ├ž├╝nk├╝ ├že┼čitli taray─▒c─▒lardan gelen destek her yinelemede de─či┼čiyor.

─░ken background-color , t├╝m b├╝y├╝k taray─▒c─▒lar (CSS 3 i├žin yeni de─čil) [1] taraf─▒ndan desteklenen alfa saydaml─▒─č─▒, yan─▒lt─▒c─▒ olabilir ├Âzellikle Internet Explorer ile ├Ânceki s├╝r├╝m├╝ne 9'a ve ├Ânceki s├╝r├╝m 5.1 i├žin Safari s─▒n─▒r renk ile yapabilirsiniz. [2]

Compass veya SASS gibi bir ┼čey kullanmak , ├╝retime ve platformlar aras─▒ uyumlulu─ča ger├žekten yard─▒mc─▒ olabilir.


[1] W3Schools: CSS arka plan rengi ├Âzelli─či

[2] Norman Blog: Taray─▒c─▒ Deste─či Kontrol Listesi CSS3 (Ekim 2012)


7







CSS 3, sorununuzu kolayca ├ž├Âzer. kullan─▒n:

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

Burada, rgba k─▒rm─▒z─▒, ye┼čil, mavi ve alfa de─čeri anlam─▒na gelir. Ye┼čil de─čer 255 nedeniyle elde edilir ve yar─▒ saydaml─▒k 0.5 alfa de─čeri ile elde edilir.


7







Az kullan─▒yorsan─▒z kullanabilirsiniz fade(color, 30%) .


6


2015-06-03





Degrade s├Âzdizimini kullanarak bunu Internet Explorer 8 i├žin (ab) ile ├ž├Âzebilirsiniz . Renk format─▒ ARGB'dir. E─čer kullan─▒yorsan─▒z Sass ├Âni┼člemci yerle┼čik fonksiyonu "yani-alt─▒gen-str ()" se├žene─čini kullanarak renkleri d├Ân├╝┼čt├╝rebilirsiniz.

 background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
 

4







Sen saf kullanabilirsiniz CSS 3 : rgba(red, green, blue, alpha) , alpha istedi─činiz ┼čeffafl─▒k d├╝zeyidir. JavaScript ya da jQuery'e gerek yok.

─░┼čte bir ├Ârnek:

 #item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
 

4


2014-09-14





 <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/ ?


3







rgba color code A┼ča─č─▒da verilen bu ├Ârnekte oldu─ču gibi CSS kullanarak bunu yapabilirsiniz .

 .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> 


2







Ayn─▒ div ├╝zerindeki bir g├Âr├╝nt├╝n├╝n ├╝zerine bindirmek i├žin daha kolay bir ├ž├Âz├╝m var. Bu arac─▒n do─čru kullan─▒m─▒ de─čil. Ancak bu bindirmeyi CSS kullanarak yapmak i├žin bir cazibe i┼člevi g├Âr├╝r.

Bunun gibi i├ž metin g├Âlgesini kullan─▒n:

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

Bu kadar :)


1







Sen kullanabilirsiniz RGBA (red, green, blue, alpha) i├žinde CSS . Bunun gibi bir ┼čey:

Yani sadece b├Âyle bir ┼čey yapmak sizin durumunuzda i┼če yarayacak:

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

span {
  color: white;
}
 

1







Benim g├Âr├╝┼č├╝me g├Âre, arka plan rengini opakl─▒kla kullanman─▒n en iyi yolu a┼ča─č─▒daki gibidir. Bunu kullan─▒rsak, test rengi, kenarl─▒k, vb. Di─čer elementlerin opakl─▒─č─▒n─▒ kaybetmeyiz.

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

Opakl─▒kla arka plan rengini kullan

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


Resim tan─▒m─▒n─▒ buraya girin


1







Normalde bu s─▒n─▒f─▒ i┼čim i├žin kullan─▒r─▒m. Olduk├ža iyi.

 .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 */
} 


0







RGB'de (63, 245, 0) renk kodu gibi opakl─▒─ča sahip RGB rengini kullanabilir ve opakl─▒─č─▒ ekleyebilir (63, 245, 0, 0.5 gibi) ve ayr─▒ca RGB'yi RGBA ile de─či┼čtirebilirsiniz. A opakl─▒k i├žin kullan─▒lacakt─▒r.

 div {
  background: rgba(63, 245, 0, 0.5);
} 


-2



─░lgili yay─▒nlar


Bir 'div' kab─▒na s─▒─čacak ┼čekilde bir resmi nas─▒l otomatik olarak yeniden boyutland─▒r─▒r─▒m?

Metin css i├žinde bir resmin ├╝zerine nas─▒l yerle┼čtirilir

ImageMagick ve komut sat─▒r─▒ istemi kullanarak saydam arka plan belirleme

HTML / CSS kullanarak bir resmin etraf─▒na metin kayd─▒rma

CSS kullanarak vurgulu bir g├Âr├╝nt├╝ ├╝zerinde Yak─▒nla┼čt─▒rma Efekti olu┼čturma?

Javascript / jQuery kullanarak bir g├Âr├╝nt├╝n├╝n y├╝klenip y├╝klenmedi─čini nas─▒l belirleyebilirim?

Css [duplicate] kullanarak div'deki arka plan g├Âr├╝nt├╝s├╝n├╝ yeniden boyutland─▒r─▒n

─░OS Swift'de bir resme nas─▒l metin eklerim?

Pip kullanarak uygun bir Python paketini nas─▒l arayabilirim?

Bir g├Âr├╝nt├╝y├╝ Android'de nas─▒l ┼čeffaf hale getirebilirim?

Etiketle ilgili di─čer sorular [html]


D├╝zenli yay─▒n vs. static_cast vs. dynamic_cast [yinelenen]

JQuery kullanarak bir div innerHTML de─či┼čtirmek nas─▒l?

ÔÇťDownstreamÔÇŁ ve ÔÇťupstreamÔÇŁ un tan─▒m─▒

Git: ┼čube ├Âdeme yapam─▒yor - error: pathspec 'ÔÇŽ' git olarak bilinen hi├žbir dosyayla e┼čle┼čmedi

Statik bir HTML sayfas─▒na favicon ekleme

Google Chrome'da HTTP ba┼čl─▒klar─▒n─▒ g├Âr├╝nt├╝le?

Eski bir taahh├╝tten yeni bir Git ┼čubesi nas─▒l olu┼čturabilirim? [├žift]

Yeni elemanlar eklemek i├žin numaraland─▒rmalar alt s─▒n─▒fa sokulabilir mi?

Vim ve Ctags ipu├žlar─▒ ve p├╝f noktalar─▒ [kapal─▒]

npm install vs. update - fark nedir?