Nieprzezroczystość tła CSS [duplikat]

Możesz użyć CSS 3 :before, aby mieć półprzezroczyste tło i możesz to zrobić za pomocą tylko jednego kontenera. Użyj czegoś takiego

<article>
  Text.
</article>

Następnie zastosuj CSS

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Próbka: http://codepen.io/anon/pen/avdsi

Uwaga: Może być konieczne dostosowanie wartości z-index.

Następujące metody mogą być użyte do rozwiązania Twojego problemu

1. Metoda CSS Aplha Transparency (nie działa w IE 8)

   #div{background-color:rgba(255,0,0,0.5);}
   

2. Użyj przezroczystego obrazu png zgodnie z wyborem jako tła.

3. Użyj poniższego fragmentu kodu css, aby utworzyć przezroczyste tło między przeglądarkami. Oto przykład z #000000 @ 0.4% nieprzezroczystość

   .div {  
       background:rgb(0,0,0);  
       background: transparent\9;  
       background:rgba(0,0,0,0.4);  
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
       zoom: 1;  
   }    
   .div:nth-child(n) {  
       filter: none;  
   }
   

Aby uzyskać więcej szczegółów dotyczących tej techniki, zobacz ten , który ma generator css online.

Zrobiłbym coś takiego

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: 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)";}

Możesz użyć sass transparentize, uważam, że jest najbardziej użyteczny i prosty w użyciu.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

Dzieje się tak, ponieważ wewnętrzny div ma 100% krycia div, w którym jest zagnieżdżony (który ma 40% krycia).

Można utworzyć dwa oddzielne divy w ten sposób:

<div id="background"></div>
<div id="bContent"></div>

Ustaw pożądane krycie css i inne właściwości dla tła hte i użyj właściwości z-index (z-index ), aby stylować i pozycjonować div bContent. Dzięki temu możesz umieścić div na tle div bez z jego nieprzezroczystością.

Inną opcją jest RGBa . To pozwoli Ci zagnieżdżać swoje Div I nadal osiągnąć krycie specyficzne dla div.

Ostatnią opcją jest po prostu półprzezroczyste .obraz png w pożądanym kolorze w wybranym edytorze obrazów, ustaw właściwość background-image na adres url obrazu, a następnie nie będziesz musiał się martwić o mucking o css i utratę możliwości i organizacji zagnieżdżonego div struktura.

Upewnij się, że szerokość i wysokość na pierwszym planie są takie same z tłem, lub spróbuj mieć właściwości top, bottom, left I right.

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>