DIV Transparent formatieren

[Manuelw]

Hallo!

Ich habe Zwei Fragen an Euch!

1. Ich würde gerne einen DIV-Container in welchem ein Text steht Schwarz Transparent formatieren. Das ganze habe ich bis jetzt folgendermaßen umgesetzt:

  
#content {  
			opacity: 0.8;  
			-moz-opacity:0.8;  
			background-color: #000;  
			border: 1px solid #333;  
			width: 958px;  
			min-height: 500px;  
			height: auto;  
			padding: 10px 10px 0px 10px;  
}  

Tranparent wäre das ganze ja, wenn nur nicht das Problem wäre, dass nun auch die kompette Schrift transparent ist.

Könnt Ihr mir eventuell sagen, wie ich machen muss, dass nur der Hintergrund und nicht die Schrift transparent ist?

Und meine zweite Frage wäre:" Ich würde gerne eine Horizontale "Box/Linie" mit einer Höhe von ca. 80px vom Linken Rand bis zum Rechten rand Quer über die Seite legen.

L.G.
Manuel

[1UnitedPower]

Meine Herren!

Könnt Ihr mir eventuell sagen, wie ich machen muss, dass nur der Hintergrund und nicht die Schrift transparent ist?

background-color: rgba( 0, 0, 0, 126 ); // rot, grün, blau, alpha(-transparenz)  
  
background-color: hsla( 0, 0, 0, 0.5 ); // hue, saturation, lightness, alpha(-transparenz)

Oder mit einem Hintergrund-Bild, das mehrstufige Alpha-Transparenz unterstützt (z.B. png).

[Gunnar Bittersmann]

@@1UnitedPower:

nuqneH

background-color: rgba( 0, 0, 0, 126 ); // rot, grün, blau, alpha(-transparenz)

background-color: hsla( 0, 0, 0, 0.5 ); // hue, saturation, lightness, alpha(-transparenz)

  
Und davor noch ein Fallback für Browser, die RGBA bzw. HSLA nicht unterstützen:  
  
~~~css
#content  
{  
  background-color: black;  
  background-color: rgba( 0, 0, 0, 126 );  
}

Qapla'

[Der Martin]

Hallo,

background-color: rgba( 0, 0, 0, 126 ); // rot, grün, blau, alpha(-transparenz)

background-color: hsla( 0, 0, 0, 0.5 ); // hue, saturation, lightness, alpha(-transparenz)

  
das Symbol '//' (zwei Schrägstriche) bedeutet zwar in vielen Sprachen "Kommentar von hier bis zum Zeilenende", in CSS aber nicht. Deswegen rebelliert hier in der Posting-Anzeige auch das Syntax-Hilighting.  
  
In CSS ist das Paar /\* ... \*/ AFAIK die einzige zulässige Kommentar-Notation.  
  
Ciao,  
 Martin  

-- 
Wer es in einem Unternehmen zu etwas bringen will, muss so tun, als hätte er es schon zu etwas gebracht.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

das Symbol '//' (zwei Schrägstriche) bedeutet zwar in vielen Sprachen "Kommentar von hier bis zum Zeilenende", in CSS aber nicht.

In Sass schon. Wer schreibt denn schon noch CSS? ;-)

Qapla'

[Gunnar Bittersmann]

@@Manuelw:

nuqneH

  	opacity: 0.8;  
  	-moz-opacity:0.8;  

Zum einen sollten die Eigenschaften mit Präfix immer VOR der präfixfreien stehen; zum anderen war -moz-opacity noch nie sinnvoll.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Manuelw!

Und meine zweite Frage wäre:" Ich würde gerne eine Horizontale "Box/Linie" mit einer Höhe von ca. 80px vom Linken Rand bis zum Rechten rand Quer über die Seite legen.

Wenn das im Hintergrund passieren soll, verwende ein Hintergrundbild für das html-Element, das du mit linear-gradient umsetzt.

Wenn es im Vordergrund liegen soll, könntest du ein zusätzliches Element (eigentlich bäh, deshalb möglicherweise auch Pseudo-Element) entsprechend positionieren.

Matthias