Blupixel IT Blog – Articoli e Tutorial Informatica e Programmazione

Blog ufficiale di Blupixel IT Srl

Sfondo CSS trasparente cross compatibile con PHP

Per creare uno sfondo trasparente che sia compatibile con tutti i browser è necessario usare come background un url con un immagine trasparente di un pixel ripetuta verticalmente ed orizzontalmente.

Per non dover rifare l’immagine del pixel tutte le volte possiamo usare uno script php che lo crei in automatico a partire da alcuni paramteri passatigli.

Prendere il file qui sotto, salvarlo con un nome tipo pixelBgCreator.php ed inserirlo in un path a scelta del sito, che sia raggiungibile.
 

<?php

$my_img = imagecreate( 1, 1 );
imagecolorallocatealpha( $my_img, $_GET['R'], $_GET['G'], $_GET['B'], (int) (1 - $_GET['T']*127) );

header( "Content-type: image/png" );
imagepng( $my_img );

?>

 

Quindi per aggiungere uno sfondo nero trasparente all’elemento con id page sarà sufficiente usare:

#page{
background: url(PATH_DELLO_SCRIPT/pixelBgCreator.php?R=0&G=0&B=0&T=0.7) repeat top left;
background: rgba(0,0,0,0.7);
}

 

Sostituendo il numero nei valori R (Rosso), G (Verde) e B (Blu) ed impostando la trasparenza nel valore T (Trasparenza) verrà ritornato in automatico un pixel del colore e trasparenza scelti.
Aggiungendo dopo lo stesso background con il metodo standard (background: rgba(0,0,0,0.7)) permettiamo ai browser più recenti di evitare di prendere l’immagine e di creasela da soli.

A presto