De achtergrondafbeelding faden...

Status
Niet open voor verdere reacties.
T

Trace7r

Gebruiker
Lid geworden
18 okt 2007
Berichten
81
Ik snap er niets van. :o

Al geprobeerd om:

HTML: 
filter:alpha(opacity=30);

in mijn CSS-file te zetten, achter de img te zetten en blijkt niet te werken.
Eerst dacht ik dat het kwam omdat er telkens een andere foto geladen wordt, dus heb ik een vaste foto genomen en hier krijg ik ook geen fade effect op.

Iemand een idee? :confused:

Groeten, Trace7r.
 
die filterfunctie werkt enkel in IE, voor de meeste andere browsers kan je de eigenschap 'opacity' gebruiken
 
Maar het werkt in IE dus ook niet. :confused:
Ik werk met Dreamweaver en in de CSS file kan ik met het toevoegen van attribbuten, opacity niet terug vinden, wel filter en daar kan ik dan opacity invullen, maar dat werkt dus niet. :(

Een klein voorbeeldje zou misschien wel helpen. :o

Groeten, Trace7r.
 
deze werken wel:
PHP: 
//css
.opacity50 {


opacity: .5;  //anderen
filter: alpha(opacity=50);  //ie geloof ik
-moz-opacity: .5;  //firefox


}
 
Dat is toch een eigenschap voor een img? Want het werkt niet hoor. :shocked:
Of is dat voor een overlappende DIV bovenop de achtergrond die je een kleur geeft en dan die kleur laat faden? :(

in Body:
HTML: 
<div align="center" class="Background" id="Background">
     <img src="Images/StrBBQ-1.jpg" name="preLoad" height="100%" id="preLoad">
</div>

in Css-file:

HTML: 
.Background	{
	background-repeat: no-repeat;
	height: 750px;
	width: 1400px;
	top: 0px;
	left: 50%;
	margin-left: -650px;
	position: absolute;
	opacity: .5;  //anderen 
	filter: alpha(opacity=50);  //ie geloof ik 
	-moz-opacity: .5;  //firefox 
}

.preLoad	{
	opacity: .5;  //anderen 
	filter: alpha(opacity=50);  //ie geloof ik 
	-moz-opacity: .5;  //firefox 
}

De eigenschappen dus zowel aan de DIV en aan IMG gekoppeld werkt niet. :(
De IMG in de body werkt hier toch als placeholder en dan zouden de eigenschappen van die placeholder toch van toepassing moeten zijn op alle foto's die daarin geladen worden? :confused:

HTML: 
preLoad.src = "Images/StrBBQ-"+i+".jpg";

Groeten, Trace7r.
 
Laatst bewerkt:
VVouter,

Ik snap het niet goed ze, als ik die link volg dan zie ik dus ook geen verschillen in die afbeeldingen van die bloem...

Misschien werkt het allemaal wel maar zie ik het hier niet??? :eek:

Het is te zeggen, misschien kan je een referentie geven op die pagina waar je de originele foto kan laten zien, zodoende dat het verschil duidelijk wordt.
Ik snap er echt niks van :(

Groeten, trace7r.
 
Laatst bewerkt:
Trace7r zei:
[...]als ik die link volg dan zie ik dus ook geen verschillen in die afbeeldingen van die bloem...
Misschien werkt het allemaal wel maar zie ik het hier niet???[...]
Klik om te vergroten...
Kan je hier even posten welke combinatie van browser(+versie) en OS je gebruikt?
 
In het voorbeeld wordt op 3 verschillende manieren de opacity toegepast. Dit via filter:alpha(opacity=50), -moz-opacity:.50 en opacity:.50. Door dit voorbeeld in verschillende browsers te bekijken, zie je de verschillen.
 
Trace7r zei:
HTML: 
<div align="center" class="Background" id="Background">
     <img src="Images/StrBBQ-1.jpg" name="preLoad" height="100%" id="preLoad">
</div>
Klik om te vergroten...

Als je daar nou eens:

HTML: 
<img src="Images/StrBBQ-1.jpg" class="preLoad" height="100%" id="preLoad">
 
Erik,

Bedankt maar dat is spijtig genoeg geen oplossing.

Groeten, Trace7r.
 
Oké, maar als je de CSS-class die je geschreven hebt wilt gebruiken zul je het wel zo moeten noemen. Anders staat die class voor niets in je file en zul je er ook geen resultaat van zien.

Als je ook name="preLoad" nodig hebt, kun je ze er uiteraard beide inzetten:

HTML: 
<img src="Images/StrBBQ-1.jpg" name="preLoad" class="preLoad" height="100%" id="preLoad">
 
Ik heb een Test.html met 2 DIV's aangemaakt die elkaar overlappen.
De eerste is rood en de andere is blauw, de bedoeling is dat in het overlappend deel het rode door het blauwe schijnt, dit is geschreven met volgende code:
HTML: 
<body>
<div id="nr1" class="nr1">
<div id="nr2" class="nr2"></div>
</div>
</body>
HTML: 
.nr1{
	border: 1px solid #000000;
	height: 100px;
	width: 100px;
	position: absolute;
	margin-left: 10px;
	margin-top: 10px;
	background-color: #FF0000;
}

.nr2{
	border: 1px solid #000000;
	height: 100px;
	width: 100px;
	position: absolute;
	margin-left: 40px;
	margin-top: 40px;
	background-color: #0000FF;
	opacity: .5;  //anderen 
	filter: alpha(opacity=50);  //ie geloof ik 
	-moz-opacity: .5;  //firefox 
}

dit werkt dus NIET, waarom? ik weet het niet.

Groeten, Trace7r.
 
Mmm, het kan allemaal wel werken maar ik zie het dus echt niet he: :(

Hierbij een screenshot en dan zie je dat beide vakken steeds volledig overlappen zonder dat het rode deel door het blauwe komt, reden???? :confused:

Groeten, Trace7r.
 

Bijlagen

Sorry, ik kan je verder niet helpen. Ik zelf heb geen vista. Succes:thumb:
 
VVouter,

Kan jij een screenshot posten van het resultaat zoals jij het te zien krijgt?

Groeten, Trace7r.
 
Hier een screenshot:
attachment.php
 

Bijlagen

  • ScreenShot001.jpg
    ScreenShot001.jpg
    38,3 KB · Weergaven: 55
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan