Şeffaf CSS arka plan rengi

Yazı tipini etkilemeden opaklık kullanarak liste menüsünün arka planının kaybolmasını istiyorum. CSS3 ile mümkün mü?

artık rgba'yı aşağıdaki gibi CSS özelliklerinde kullanabilirsiniz :

.class {
    background: rgba(0,0,0,0.5);
}

0,5 şeffaflıktır , değerleri tasarımınıza göre değiştirin.

Canlı demo http://jsfiddle.net/EeAaB/

daha fazla bilgi http://css-tricks.com/rgba-browser-support/

Bu üç seçeneği aklınızda bulundurun (3 numaralı seçeneği istiyorsunuz):

1) Tüm eleman şeffaftır:

visibility: hidden;

2) Tüm eleman biraz şeffaftır:

opacity: 0.0 - 1.0;

3) Öğenin arka planı şeffaftır:

background-color: transparent;

evet, bu mümkün. arka plan renginiz için sadece rgba-sözdizimini kullanın .

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

İşte CSS adlı renkler kullanan bir örnek sınıf:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

Bu,% 25 opak (renkli) ve% 75 şeffaf bir arka plan ekler.

CAVEAT Maalesef, opaklık bağlı olduğu tüm öğeyi etkileyecektir .
Dolayısıyla, bu öğede metin varsa, metni de% 25 opaklığa ayarlayacaktır. :-(

Bunu aşmanın yolu, rgbaveyahsla , istediğiniz arka plan "renginin" bir parçası olarak saydamlığı belirtmek yöntemlerini . Bu, öğenizdeki diğer öğelerin şeffaflığından bağımsız olarak arka plan şeffaflığını belirlemenize olanak tanır.

Mavi bir arka planı diğer unsurları etkilemeden% 75 şeffaflığa ayarlamanın 3 yolu:

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

Bu durumda background-color:rgba(0,0,0,0.5);en iyi yoldur. Örneğin:background-color:rgba(0,0,0,opacity option);

Bunu başarmak için, background-colorelemanın üzerinde değişiklik yapmanız gerekir .

(Yarı) şeffaf bir renk oluşturmanın yolları:

• CSS renk adı transparent tamamen şeffaf bir renk oluşturur.

  Kullanım:

    .transparent{
      background-color: transparent;
    }
  

• Alfa kanalını (opaklık) ve işlevlerine eklemenizi sağlayan rgbaveya hslarenk işlevlerini kullanma . Alfa değerleri 0 - 1 arasındadır.rgbhsl

  Kullanım:

    .semi-transparent-yellow{
      background-color: rgba(255, 255, 0, 0.5);
    }
    .transparent{
      background-color:  hsla(0, 0%, 0%, 0);
    }
  

• Daha önce bahsedilen çözümlerin yanı sıra, HEX formatını alfa değeri ( #RRGGBBAAveya #RGBAnotasyon ) ile de kullanabilirsiniz .

  Bu oldukça yenidir (CSS Renk Modülü Seviye 4'te bulunur), ancak daha büyük tarayıcılarda zaten uygulanmıştır (üzgünüm, IE yok).

  Bu, alfa kanalını (opaklık) da onaltılık bir değer olarak değerlendirdiğinden, 0 - 255 ( FF) aralığında olmasını sağladığından, diğer çözümlerden farklıdır .

  Kullanım:

    .semi-transparent-yellow{
      background-color: #FFFF0080;
    }
    .transparent{
      background-color: #0000;
    }
  

Bunları da deneyebilirsiniz:

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

Bunu dene:

opacity:0;

IE8 ve öncesi için

filter:Alpha(opacity=0); 

W3Schools'tan Opaklık Demosu

Evet, sadece düz metin yapabilirsiniz

.someDive{
    background:transparent 
}