[CSS]Transparant?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Steen

steen

31/01/2010 15:59:00
Quote Anchor link
Ik heb een klein stukje code om een div transparant te maken, alleen nu neemt hij de tekst ook mee. Hoe kan ik de tekst wel gewoon "normaal" zichtbaar laten zijn?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<style>
.trans {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}
</style>
<div class="trans" style="display:block; background-color:#000;width:250px; height:82px; padding-top:18px;">
<span style="padding-left:10px;color:#dff4ff;font-size:42px; font-weight:bold;">Woord1</span>
<span style=" font-weight:bold;color:#FFF;font-size:42px;">Woord2</span>
</div>
Gewijzigd op 01/01/1970 01:00:00 door Steen
 
PHP hulp

PHP hulp

11/03/2025 17:55:32
 
PHP Scripter

PHP Scripter

31/01/2010 16:01:00
Quote Anchor link
http://www.w3schools.com/Css/css_image_transparency.asp
 
Steen

steen

31/01/2010 16:03:00
Quote Anchor link
Daar is de tekst net zo goed transparant als de achtergrond of niet? Zo niet, hoe pas je dat dan hier toe?
 
P Lekensteyn

P Lekensteyn

31/01/2010 16:07:00
Quote Anchor link
Het kan niet.
Om een transparante achtergrond te hebben, maak een png of gif afbeelding.
 
Steen

steen

31/01/2010 16:10:00
Quote Anchor link
Nog even verder gezocht, en het kan dus wel peter.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<style type="text/css">
body
{
    background:url('info.png');    
}
.transbox
{
    width: 400px;
    height: 180px;
    margin: 30px 50px;
    background-color: #000000;
    border: 1px solid black;
    filter:alpha(opacity=60);
    opacity:0.6;
}
.text p
{
    margin: 30px 40px;
    font-weight: bold;
    color: #FFFFFF;
}
.text
{
    position: absolute;
    top: 30px;
    left: 50px;
}
</style>
</head>
<body>
<div class="transbox"></div>
<div class="text"><p>Hello World</p></div>
</body>
</html>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.