Archief - HTML/CSS: png hack voor css background property

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Bram

Legacy Member
Ik weet da er een png hack bestaat voor de html <img> tag in HTML (opdat IE toch transperency zou ondersteunen) maar ik vroeg me af of iets gelijkaardigs ook kon voor de background property in CSS...

tzit nl. zo: ik zou een header willen maken, vergelijkbaar met die van veerle.duoh.com, dus ook met zo'n semi transparante hover, maar de header images zouden eigenlijk via php moeten kunnen gerandomized worden...
om voor elke header een aparte css en aparte images te gaan maken lijkt me een beetje zot...
kkan natuurlijk ook altijd met aparte images werken, (via !important) om dan voor IE geen transparantie te gebruiken...
b

b0bbY

Legacy Member
voor zover ik weet bestaat hier geen hack/oplossing voor...ook al eens een middag achter gezocht, zonder succes.

IE7 zou transparante .png's wel moeten ondersteunen.
R

RpR

Legacy Member
Dacht een vrij simpel test.png naar test.gif noemen en gif gebruiken dat dat werkte.
S

Smoerf

Legacy Member
Je <img /> tag zelf gebruiken zal denkek niet mogelijk zijn, maar voor een div oid bestaat een ranzige css M$ filter en die is:

Code: 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/pic.png', sizingMethod = 'scale');

Meer info hierover op de msdn library

Er bestaat ook een javascriptje voor:
Code: 
/**********************************************************************************
   PNG support functions
**********************************************************************************/

	// Super, check if the visitor is using MSIE < 7
	var isExp = (navigator.userAgent.indexOf("MSIE") != -1 && 
	navigator.userAgent.indexOf("Opera") == -1);
	
	var isnotIE7 = false;
	// if so, let's check if he's not using 7, 'cause 7 has png support (it's about time)
	if(isExp)
	{
		var version = navigator.userAgent.split("MSIE ")[1];
		version = version.split(";")[0];
		version = parseInt(version);
		isnotIE7 = (version < 7);
	}
	
	// the magic function that makes png's transparent in MSIE
	function png_transparent(id, pic){
		// so, if he's using MSIE < version 7 then...
		if (isExp && isnotIE7){
			// apply some ugly microsoft filters, brrrr
			document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'i/" + pic + "', sizingMethod = 'scale')";
			document.getElementById(id).style.backgroundImage = "url('i/transparent.gif')";
		}
	}

die je ook als volgt aanroept:
Code: 
<script type="text/javascript">
<!--
   png_transparent('site', 'site.png');
-->
</script>

Maar dan moet je 2 zaken doen:
- je png als achtergrond instellen op een div die de width/height heeft van de png
- een gifje aanmaken van 1x1px die volledig doorzichtig is

Bovenstaande javascript is gebaseerd op één of andere tutorial op een portfolio waarvan ik de link niet meer direct herinner... Als het me te binnen schiet post ik het.
Bron: http://portfolio.fluxdesign.be
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan