Προς το περιεχόμενο

Background pictures transparency

Redshift

Από τον Redshift
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

Redshift Experienced

Redshift

Δημοσ.
Δημοσ.

Θελω να εφαρμοσω  transparency στις εικονες παρασκηνιου του blog της υπογραφης μου

 

πχ opacity:0.4;

 

 

ο κωδικας ο οποιος εναλλασσει τις εικονες ειναι

<script type='text/javascript'>
var banner= new Array() 
banner[0]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100604123750459369.jpg" 
banner[1]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100609090413392862.jpg" 
banner[2]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100609090431403981.jpg"
banner[3]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/Background.jpg"
banner[4]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/love-vector-illustration-wallpapers_1920x1080_86381.jpg"
banner[5]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/sheep-1920x1080.jpg"
banner[6]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86367.jpg"
banner[7]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86369.jpg"
banner[8]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86370.jpg"
banner[9]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86371.jpg"
banner[10]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86377.jpg"
banner[11]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86379.jpg"
banner[12]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/travel-in-balloon_1920x1080_76601.jpg"
banner[13]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/love-vector-illustration-wallpapers_1920x1080_86391.jpg"
var random=Math.floor(14*Math.random());
document.write("<style>");
document.write("body {");
document.write ('   background: #dfd9d9  url("' + banner[random] + '")  top left; background-repeat:no-repeat; background-attachment: fixed;  ');   
document.write(" }");
document.write("</style>");
</script>

 

 

Crawl_From_Death Experienced

Crawl_From_Death

Δημοσ.
Δημοσ.

Γιατι δεν χρησιμοποιεις την vegas?

 

Ειναι πολυ καλη βιβλιοθηκη, κανει τις εναλλαγες που θελεις (με εφε βεβαια...) και υποστηριζει την δυνατοτητα να βαλεις μια εικονα πανω απο αυτην που εμφανιζεται, με βαση τον selector "vegas-overlay", οπου εκει μπορεις να περασεις ειτε γραμμωτη εικονα δινοντας αλλο στυλ, ειτε διαφανεια πειραζοντας την CSS

 

Αν μετα απο ολα αυτα δεν θελεις, η CSS  που πρεπει να εχει η εικονα σου ειναι η εξης:

/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%; 
		
/* Theoretically for IE 8 & 9 (more valid) */	
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
	
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
	
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
    
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;

 

 

  • Like 1
Redshift Experienced

Redshift

Δημοσ.
  • Μέλος
Δημοσ.

ευχαριστω για την απαντηση,να προσθεσω οτι ειμαι ερασιτεχνης οποτε θα μπορουσες να μου πεις πως να προσθεσω την opacity στον ηδη υπαρχοντα κωδικα?

 

εχω κολλησει απο το πρωι με ανεπιτυχεις δοκιμες

 

η δεν δουλευει το script καθολου η μου κανει transparent τα παντα εκτος απο το background

 

ευχαριστω

Redshift Experienced

Redshift

Δημοσ.
  • Μέλος
Δημοσ.

θα μπορουσε καποιος να με βοηθησει να ενσωματωσουμε αυτο στον παραπανω κωδικα μου?

 

http://www.solucior.com/18-Javascript_opacity.html

 

<script type="text/javascript">

   function opacity(elm, value) {
       elm.style.opacity = (value / 10);
       elm.style.MozOpacity = (value / 10);
       elm.style.KhtmlOpacity = (value / 10);
       elm.style.filter = "alpha(opacity=" + (value * 10) + ")";
       elm.style.MsFilter = " 'progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value * 10) + ")' ";
   }

</script>

<img src="picture1.gif" alt=" " style="width: 400px; height: 50px" onmouseover="opacity(this, 5)" onmouseout="opacity(this, 10)" />
SlackulatoR Grand Master

SlackulatoR

Δημοσ.
Δημοσ.

Όταν πηγαίνει πάνω το ποντίκι θες να αλλάζει το opacity; αυτό γίνεται με τον παρακάτω κώδικα:

 

Δίνεις μία class στην εικόνα σου:

 

<img class="myIMG" src="image.jpg" />

 

και μετά με CSS αλλάζεις το opacity:

 

<style>
.myIMG{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;	 
	opacity: 0.5;
}

.myIMG:hover{
	filter:alpha(opacity=100);
	-moz-opacity: 1; 
	-khtml-opacity: 1;
	opacity: 1;
}
</style>
  • Like 1
Redshift Experienced

Redshift

Δημοσ.
  • Μέλος
Δημοσ.

θελω να τις κανω ολες wash out ωστε να ειναι πιο ευαναγνωστο το περιεχομενο

 

κ επειδη αλλαζω προσθετω εικονες κλπ θελω απλα να βαζω τις εικονες νορμαλ κ να συμβαινει αυτοματα

SlackulatoR Grand Master

SlackulatoR

Δημοσ.
Δημοσ.

Τότε απλά θα χρησιμοποιήσεις το πρώτο μέρος του css κώδικα που σου έδωσα:

 

<style>
.myIMG{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;	 
	opacity: 0.5;
}
</style>

 

 

Απλά σε όσες εικόνες θέλεις να υπάρχει το opacity θα τους δίνεις class=myIMG στο <img> tag όπως στο παράδειγμα που σου έδειξα παραπάνω.

Redshift Experienced

Redshift

Δημοσ.
  • Μέλος
Δημοσ.

θα μπορουσες να με βοηθησεις λιγο γιατι οπως ειπα ερασιτεχνης ειμαι κ εχω προσπαθησει με τον κωδικα μου να εφαρμοσω αυτα που λες χωρις επιτυχια

 

<script type='text/javascript'>
var banner= new Array() 
banner[0]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100604123750459369.jpg" 
banner[1]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100609090413392862.jpg" 
banner[2]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100609090431403981.jpg"
banner[3]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/Background.jpg"
banner[4]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/love-vector-illustration-wallpapers_1920x1080_86381.jpg"
banner[5]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/sheep-1920x1080.jpg"
banner[6]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86367.jpg"
banner[7]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86369.jpg"
banner[8]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86370.jpg"
banner[9]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86371.jpg"
banner[10]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86377.jpg"
banner[11]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86379.jpg"
banner[12]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/travel-in-balloon_1920x1080_76601.jpg"
banner[13]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/love-vector-illustration-wallpapers_1920x1080_86391.jpg"
var random=Math.floor(14*Math.random());
document.write("<style>");
document.write("body {");
document.write ('   background: #dfd9d9  url("' + banner[random] + '")  top left; background-repeat:no-repeat; background-attachment: fixed;  ');   
document.write(" }");
document.write("</style>");
</script>
SlackulatoR Grand Master

SlackulatoR

Δημοσ.
Δημοσ.

Λοιπόν, θα αλλάξεις το script με το παρακάτω

 

<script type='text/javascript'>
var banner= new Array() 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100604123750459369.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100609090413392862.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100609090431403981.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/Background.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/love-vector-illustration-wallpapers_1920x1080_86381.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/sheep-1920x1080.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86367.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86369.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86370.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86371.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86377.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86379.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/travel-in-balloon_1920x1080_76601.jpg</span>"); 
banner.push("<span class='myIMG'>https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/love-vector-illustration-wallpapers_1920x1080_86391.jpg</span>"); 
var random=Math.floor(14*Math.random());
document.write("<style>");
document.write("body {");
document.write ('   background: #dfd9d9  url("' + banner[random] + '")  top left; background-repeat:no-repeat; background-attachment: fixed;  ');   
document.write(" }");
document.write("</style>");
</script>

 

 

Και στο CSS σου θα προσθέσεις αυτό:

.myIMG{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;	 
	opacity: 0.5;
}

 

Αυτό είναι για μισό opacity, αν θες 10% θα αλλάξεις τους αριθμούς αντίστοιχα σε 10, 0.1 κτλ.

Δοκίμασε το και μου λες.

  • Like 1
SlackulatoR Grand Master

SlackulatoR

Δημοσ.
Δημοσ. (επεξεργασμένο)

Όντως έκανα λάθος, θα το ξανακοιτάξω και θα γράψω πάλι.

 

Edit: Θα συνεχίζω να ψάχνω πως θα γίνει με κώδικα αν και δε νομίζω να γίνεται λόγο του ότι είναι array, αλλά γιατί δεν κάνεις το εξής; Πέρνα τις εικόνες από το Photoshop χαμήλωσε το opacity και ξανά ανέβασέ τες.

Επεξ/σία από SlackulatoR
Redshift Experienced

Redshift

Δημοσ.
  • Μέλος
Δημοσ.

το σκεφτηκα με το photoshop αλλα με την css μπορεις να αλλαζεις το ποσοστο opacity ευκολα

 

κ να κανεις δοκιμες μεχρι να βρεις πως καθεται καλα



υπαρχει καποιος τροπος να πεταω ενα προκαθορισμενο semi transparent λευκο φοντο πανω απο καθε background οποιο κ να ειναι αυτο? 

SlackulatoR Grand Master

SlackulatoR

Δημοσ.
Δημοσ.

Ναι είναι εύκολο απλά εσένα οι εικόνες φορτώνουν στο body όπου αν δώσεις opacity θα εφαρμοστεί σε όλα τα αντικείμενα της σελίδας.

Αν ήταν μέσα σε ένα div θα ήταν απλό.

 

Όσο για το να βάλεις την λευκή εικόνα από πάνω είναι καλή ιδέα αλλά πρέπει να δώσεις z-index σε όλο το περιεχόμενο της σελίδας σου φαντάζομαι (αναλόγως πως έχει φτιαχτεί). Όταν δίνεις z-index για να λειτουργήσει πρέπει να δίνεις και position relative ή absolute στο αντικείμενο. 

 

Δοκίμασε να φτιάξεις ένα div στην σελίδα σου, όρισε την class και μέσω css και δώσε του το λευκό background, position, z-index κτλ.

 

<div class="myDiv"></div>

.myDiv{
	background: url(http://www.blogblog.com/1kt/transparent/white80.png) top left; 				background-repeat:repeat;	
	position:relative;
	z-index:1;
	width:1920px;
	height:1080px;
}
  • Like 1
Redshift Experienced

Redshift

Δημοσ.
  • Μέλος
Δημοσ.

κατ αρχας σε ευχαριστω πολυ για τον κοπο σου

 

εκανα το background να εμφανιζεται ολο σε καθε αναλυση οθονης,παλιοτερα που το ειχα δοκιμασει ειχε παρενεργειες του στυλ επιβαρυνε πολυ το rendering της σελιδας για λογους που δεν ξερω,τωρα μαλλον δουλευει σωστα

 

εβαλα το transparent πλακιδιο με repeat ,relative positioning και z index αλλα δεν δουλευει παλι 

 


 

<script type='text/javascript'> 
var banner= new Array() 
banner[0]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100604123750459369.jpg" 
banner[1]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100609090413392862.jpg" 
banner[2]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/1920_1080_20100609090431403981.jpg"
banner[3]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/Background.jpg"
banner[4]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/love-vector-illustration-wallpapers_1920x1080_86381.jpg"
banner[5]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/sheep-1920x1080.jpg"
banner[6]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86367.jpg"
banner[7]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86369.jpg"
banner[8]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86370.jpg"
banner[9]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86371.jpg"
banner[10]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86377.jpg"
banner[11]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/vector-illustration-cartoon-wallpapers_1920x1080_86379.jpg"
banner[12]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/travel-in-balloon_1920x1080_76601.jpg"
banner[13]="https://dl.dropbox.com/u/47365411/Everyday%20backgrounds/love-vector-illustration-wallpapers_1920x1080_86391.jpg"
var random=Math.floor(14*Math.random());
document.write("<style>"); 
document.write("body {"); 
document.write('  background: url("' + banner[random] + '")  top left; background-repeat:no-repeat; background-attachment: fixed; background-size:100% 100%; ');
document.write('  background: url(http://www.blogblog.com/1kt/transparent/white80.png)  position:relative; left:0px; top:0px; background-repeat:repeat; z-index:1000; ');
document.write(" }");
document.write("</style>");
</script>

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...