Yarı saydam bir arka plan nasıl yapılır?

Başka hiçbir şeyi etkilemeden beyaz bir arka planı% 50 şeffaf yapmam gerekiyor. Nasıl yaparım?

Kullanım rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

Kutunun içeriği% 100 opaklığa sahip olmaya devam ederken, bu size% 50 opaklık verecektir.

Eğer kullanırsanız opacity:0.5, içerik de arka plan olarak olarak soluklaşır. Bu nedenle kullanmayın.

Bu işe yarıyor, ancak bu sınıftaki öğenin tüm çocukları da bunu engellemeden şeffaf olacak.

.css-class-name {
    opacity:0.8;
}

Saydam arka planın gri olmasını istiyorsanız, lütfen deneyin:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

Bunu bildiğim iyi oldu

Bazı web tarayıcıları, şeffaf arka planın üzerinde gölgeli metin oluşturmakta zorluk çeker. Sonra arka plan olarak yarı saydam 1x1 PNG görüntü kullanabilirsiniz.

Not

IE6'nın PNG dosyalarını desteklemediğini unutmayın.

1x1 yarı saydam PNG KULLANMAYIN. PNG'yi 10x10, 100x100 vb. Boyutlara kadar boyutlandırın. Sayfanızda ne mantıklı olursa olsun. (200x200 PNG kullandım ve yalnızca 0,25 kb idi, bu yüzden burada dosya boyutu konusunda gerçek bir endişe yok.)

Bu gönderiyi ziyaret ettikten sonra, değişen şeffaflığa sahip 3, 1x1 PNG'lerle web sayfamı oluşturdum.

Dreamweaver CS5 tank atıyordu. DOS'a geri dönüşler yapıyordum !!! Görünüşe göre kaydırmaya, metin eklemeye, temelde bir şey yapmaya çalıştığımda, DW yarı saydam alanları bir seferde 1x1 piksel yeniden yüklemeye çalışıyordu ... YIKES!

Adobe teknik desteği sorunun ne olduğunu bile bilmiyordu, ancak dosyayı yeniden oluşturmamı söyledi (tesadüfen sistemlerinde çalıştı). Sadece ilk şeffaf PNG'yi css dosyasına yüklediğimde, dokümanın tekrar derin güvercin yapmasıydı.

Sonra başka bir yardım sitesinde, Dreamweaver'ı çökerten PNG'ler hakkında bir yazı buldum. PNG'nizi boyutlandırın; bunu yapmanın bir dezavantajı yok.

Tarihli olmasına rağmen, bu konudaki tek bir cevap evrensel olarak kullanılamaz. Şeffaf renk maskeleri oluşturmak için rgba kullanmak - arka plan görüntüleri ile nasıl yapılacağını tam olarak açıklamaz.

Çözümüm arka plan resimleri veya renkli arka planlar için çalışır.

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

Bunu dene:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}