Wie kann ich einem Text oder einem Bild mit CSS einen transparenten Hintergrund geben?

Question

Ist es möglich, nur mit CSS, um die background eines Elements halbtransparent sein, aber den Inhalt (Text und Bilder) des Elements undurchsichtig machen?

Ich möchte dies erreichen, ohne dass der Text und der Hintergrund zwei separate Elemente sind.

Beim Ausprobieren:

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>

Es sieht so aus, als ob untergeordnete Elemente der Deckkraft ihrer übergeordneten Elemente unterworfen sind, also opacity:1 ist relativ zum opacity:0.6 des Elternteils.

Answer 1

Sie können dies lösen für Internet Explorer 8 durch (ab)Verwendung der Gradientensyntax. Das Farbformat ist ARGB. Wenn Sie die Sass Präprozessor können Sie Farben mit der eingebauten Funktion "ie-hex-str()" umwandeln.

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

Answer 2

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

Answer 3

Sie können den an den Hexadezimalwert angehängten Deckkraftwert verwenden:

background-color: #11ffeeaa;

In diesem Beispiel aa ist die Deckkraft. Eine Deckkraft von 00 bedeutet transparent und ff bedeutet einfarbig.

Die Deckkraft ist optional, Sie können also wie immer den Hexadezimalwert verwenden:

background-color: #11ffee;

Sie können auch die alte Methode verwenden mit rgba() :

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

Und die background wenn Sie sicherstellen wollen, dass der Hintergrund keine anderen Stile, wie Bilder oder Farbverläufe, hat:

background: #11ffeeaa;

Aus der Spezifikation von Mozilla ( 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;

Answer 4

Meiner Meinung nach ist der beste Weg, eine Hintergrundfarbe mit Deckkraft zu verwenden, der folgende. Wenn wir dies verwenden, dann verlieren wir nicht die Deckkraft für die anderen Elemente, wie Testfarbe, Rahmen, etc.

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

Hintergrundfarbe mit Deckkraft verwenden

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

Answer 5

Sie können dies tun mit rgba color code mit CSS wie in diesem Beispiel unten.

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