• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

tekst met doorzichtige achtergrond op afbeeldingen

Status
Niet open voor verdere reacties.
SiaRa

SiaRa

Gevestigd lid
Lid geworden
25 mrt 2010
Berichten
301
Waarderingsscore
0
Ik ga proberen zo goed mogelijk uit te leggen wat ik wil en hopelijk kan iemand me vertellen of dit berhaupt mogelijk is en zo ja, hoe ik dat dan moet doen.

Het idee komt (van m'n baas) uit PowerPoint. Daar kun je een afbeelding invoegen, daar overheen kun je een tekstvak zetten en het tekstvak kun je vervolgens een witte achtergrond geven, maar dan wel met een bepaald percentage doorzichtigheid. Daardoor zie je achter de tekst nog wel de afbeelding, maar niet zo fel. Naast het tekstvak zie je de afbeelding wel fel.

Dat is wat ik nu wil bereiken op onze website. Een afbeelding als achtergrond zetten (sowieso al wel 'gewassen' zodat hij niet al te fel/nadrukkelijk aanwezig is); daarop moet tekst komen maar achter de tekst moet als het ware nog een wit doorzichtige achtergrond komen.

Ik hoop dat ik het een beetje goed beschreven heb.
Kan dit in websites? Ik maak gebruik van Wordpress en werk zonder wysiwyg venster, maar maak wel gebruik van dreamweaver om te pagina's te bouwen voordat ik ze in wordpress plak. Ik begrijp meer HTML dan dat ik uit m'n hoofd weet zeg maar.

Kan iemand me helpen?

Als ik meer informatie moet verstrekken, dan hoor ik dat graag.
Alvast heel erg bedankt voor iedere hulp!
 
Om iets doorschijnend te maken moet dit in css zetten:

.opacity30 {
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
 
OK. Wijs ik dit dan als class toe aan de afbeelding?
En hoe krijg ik de twee afbeeldingen over elkaar?
 
Je zou dit dan op de tekst moeten zetten, omdat anders de achtergrond van het tekstvak nog niet doorzichtig is.
Maar dit is echter niet de goede oplossing, want hierdoor wordt de tekst ook transparant, wat je denk ik niet wil (of wel?).
Zie hier: http://tinkerbin.com/glo0eo8k
Let op, dit zal in browsers waar geen support is (bv. IE8 en lager) een volle witte achtergrond tonen. Als je die ook doorzichtig wil, zal je een transparante png afbeelding als achtergrond voor de tekst moeten gebruiken.
 
Laatst bewerkt door een moderator:
hsl of rgba is inderdaad de beste/makkelijkste oplossing. een kleine transparant afbeelding is alleen beter ondersteund.
 
Werkt goed met rgba (ik dacht ga 't eens proberen)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="index,follow" />
<meta name="Language" content="nl" />
<meta http-equiv="pragma" content="cache" />
<meta name="revisit-after" content="2 days" />
<meta name="description" content="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
<meta name="keywords" content="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
<style type="text/css">
* {
outline : none;
}
body {
margin : 0;
padding : 0;
background-color : #000;
font-size : 90%;
font-famaily : "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
border : none;
}
#container, #header, #footer {
min-width : 980px;
max-width : 1250px;
}
#container {
background-color : #f7e4b0;
position : relative;
border : 1px solid #696969;
margin : 0 auto;
margin-bottom:50px;
}
#header {
background-color : #A76C3B;
height : 120px;
position : relative;
margin : 0 auto;
}
#left {
float : left;
width : 170px;
background-color : #f7e4b0;
}
#menu {
margin : 0 0 0 -25px;
}
#inhoud {
background-color : #fdf6e0;
min-width : 760px;
max-width : 1030px;
padding : 0 0 0 50px;
margin : 0 0 0 170px;
color : #000;
}
#tekst {
background-color : #fdf6e0;
float : left;
width : 95%;
margin : 30px 0 0 0;
color : #000;
padding : 0 0 50px 0;
}
#footer {
background-color : #5A2F0C;
height : 40px;
text-align : center;
}
.clear {
clear : both;
}
.item {
list-style-type : none;
line-height : 18px;
}
.item a{
font-size: 14px;
font-family: Arial;
}
a:link, a:visited {
color : #000;
text-decoration : none;
padding:2px;
}
a:hover {
color : #fff;
background-color : #462701;
text-decoration : none;
padding:2px;
}
a:active {
color : #fff;
text-decoration : none;
padding:2px;
}
h1, h2, h3, h4, h5, h6 {
font-family : Georgia, Verdana;
color : #000;
text-shadow:1px 1px 1px #555;
}
h1 {
font-weight : bold;
font-size : 23px;
}
h2, h3, h4, h5, h6{
margin-top:25px;
margin-bottom:-10px;
font-size : 16px;
}
p {
font-family : "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
color : #222;
text-align : justify;
font-size : 13px;
line-height:20px;
}
</style>

</head>
<body>

<div id="container">
<div id="header"></div>
<div id="left">
<div id="menu">
<ul>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
<li class="item"><a href="#" target="_self" title="xxxxxxxxxxxxxxxxxxxxxxxx">menu item menu item</a></li>
</ul>
</div><!-- end menu -->
</div><!-- end left -->

<div id="inhoud">
<div id="tekst">





<div style="position:absolute;top:150px;left:250px;width:300px;height:300px;background-image:url('http://www.imgdumper.nl/uploads6/511d7ffe3e75e/511d7ffe27831-plaatje.jpg');">

<div style="position:relative;margin:60px auto;width:250px;height:100px;background:rgba(255, 255, 255, 0.6);-webkit-border-radius: 50px;border-radius: 50px;">

<div style="text-align:center;padding:20px 0 0 0;">
<h1>H1 title tekst</h1>
</div>

</div>
</div>



</div><!--end tekst vak-->
<div class="clear"></div>
</div><!--end inhoud-->
<div id="footer">
</div><!--end footer-->
</div><!--end container-->
</body>
</html>
 
Wauw, dat moet ik ook eens gaan uitproberen dan.
Het was weer even naar the back of my mind geslipt door de waan van de dag, maar ik ga me er weer in verdiepen.
Thanks!!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan