Achtergrond tekstvak transparant

Status
Niet open voor verdere reacties.
M

mollerpunker

Gebruiker
Lid geworden
14 okt 2011
Berichten
20
Hey allemaal,

Ik ben na enige tijd weer begonnen om mijn website te renoveren.
IK heb nu als achtergrond een afbeelding, de logo van onze stichting. Zonder achtergrond kleur is de tekst in het tekstvak slecht te lezen... donkere tint grijs met zwarte letters. Nu wil ik in het tekst vak een lichte kleur grijs zetten en dat is dus gelukt.

Het probleem is, is dat het logo niet meer te zien is. Nu wil ik transparantie invoegen, maar dat lukt me niet echt. Ik heb de volgende codes geprobeerd:

HTML: 
<div style="border: 10px solid #808080; padding: 10px 10px 0 10px; background-color:#AAAAAA; class="transparant">

en deze heb ik geprobeerd

HTML: 
<div style="border: 10px solid #808080; padding: 10px 10px 0 10px; background-color:#AAAAAA; filter: alpha(opacity=50); // IE syntax -moz-opacity: .50; // Mozilla opacity: .50; // De rest >

Kan iemand mij vertellen hoe ik het wel moet doen ?
 
En wat heb je bij .transparant in je CSS gedefinieerd?
 
niets, dit is het enige wat ik heb. en kon vinden. nu ik zo kijk denk ik dat ik mijn topic in het verkeerde categorie heb gezet.

Maar suggesties ?
 
Ja, maar je eerste Code stuk verwijst naar een Class die je niet hebt gedefinieerd in je CSS, dat gaat dus bij voorbaat niet werken.
Je moet dan in je CSS, boven je DIV-definities dit vermelden:
HTML: 
.transparant
{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
 
hi ik heb hier een makkelijke css code die je in elke html pagina moet plakken en dan krijg je een heel mooi doorzichtig tekst vak:
HTML: 
<head>

    <title>!</title>

<style>

html {

    background: url(images/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    margin: 20px;

    font-size: 14px;
    font-family: Trebuchet MS, Arial;
    color: #fff;

}

input {

    font-size: 14px;
    font-family: Trebuchet MS, Arial;
    color: #4F4F4F;
    border: 0px;

}

a {

    color: #fff;

}

input[type=text] {

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    padding: 4px 10px;
    width: 200px;

}

input[type=submit] {

    font-weight: bold;
    background-color: transparent;
    color: #fff;
    text-align: left;
    padding: 0px;
    margin: 5px 0px 0px 0px;
    cursor: pointer;
    text-decoration: underline;

}

.content {

    background-color: #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    opacity: 0.8;

    margin: 0px auto 20px auto;
    padding: 20px 30px;
    width: 800px;

    border: 1px #252525 solid;

}

.content h1 {

    font-weight: bold;
    font-size: 24px;
    margin: 0px 0px 10px 0px;

}

.content table {

    margin: 0px 0px 0px -4px;

}

.content table td {

    font-weight: bold;
    width: 400px;
    color: #D2D2D2;

}

.content .form td {

    font-weight: bold;
    width: 120px;
    color: #D2D2D2;

}

.content #list td {

    font-weight: bold;
    width: 120px;
    color: #D2D2D2;

}

.content #plugins td {

    font-weight: bold;
    width: 700px;
    color: #D2D2D2;

}

</style>

</head>
Code: 
<head>

    <title>!</title>

<style>

html {

    background: url(images/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    margin: 20px;

    font-size: 14px;
    font-family: Trebuchet MS, Arial;
    color: #fff;

}

input {

    font-size: 14px;
    font-family: Trebuchet MS, Arial;
    color: #4F4F4F;
    border: 0px;

}

a {

    color: #fff;

}

input[type=text] {

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    padding: 4px 10px;
    width: 200px;

}

input[type=submit] {

    font-weight: bold;
    background-color: transparent;
    color: #fff;
    text-align: left;
    padding: 0px;
    margin: 5px 0px 0px 0px;
    cursor: pointer;
    text-decoration: underline;

}

.content {

    background-color: #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    opacity: 0.8;

    margin: 0px auto 20px auto;
    padding: 20px 30px;
    width: 800px;

    border: 1px #252525 solid;

}

.content h1 {

    font-weight: bold;
    font-size: 24px;
    margin: 0px 0px 10px 0px;

}

.content table {

    margin: 0px 0px 0px -4px;

}

.content table td {

    font-weight: bold;
    width: 400px;
    color: #D2D2D2;

}

.content .form td {

    font-weight: bold;
    width: 120px;
    color: #D2D2D2;

}

.content #list td {

    font-weight: bold;
    width: 120px;
    color: #D2D2D2;

}

.content #plugins td {

    font-weight: bold;
    width: 700px;
    color: #D2D2D2;

}

</style>

</head>

hij moet tussen de head in.
ik hoop dat je er wat aan hebt

gr pascalboy
 
Is wel een erg lang stuk code. Met mijn manier kan het korter.
 
het kan korter ja kan ook allen dit gebruiken
Code: 
{

    background: url(images/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    margin: 20px;

    font-size: 14px;
    font-family: Trebuchet MS, Arial;
    color: #fff;

}
de rest is zegmaar voor verschillende letters die er mooit bij passen
gr pascalboy
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan