css εικονες

[uKalele]

Καλησπερα, ειμαι αρχαριος και προσπαθω μεσω css να βαλω μια εικονα πανω στην αλλη.Διαβασα καπου οτι καπως ετσι γινεται αλλα δν μπορω να το κανω να δουλεψει.

<div class="container">
<div class="flickriver">
<a href="http://www.flickriver.com/groups/95016190@N00/pool/interesting/"><img src="http://www.flickriver.com/badge/group/all/interesting/shuffle/medium-4x3/ffffff/333333/[email protected]" border="0" alt="Flags - from countries all around the World... - View this group's most interesting photos on Flickriver" title="Flags - from countries all around the World... - View this group's most interesting photos on Flickriver"/></a>
<div class=flickriver_wrap>
	</div>
	</div>
	</div>

.flickriver{
	 float:right;
 z-index: 1;
	
	
}

.flickriver_wrap{
	   z-index: 0;
	content:url(https://image.ibb.co/cXTmOv/460x320_box.png)
	
  
	

}
.container {
    position: relative;
	
}

[tzotzosgr]

καλημέρα,

δες τον παρακάτω κώδικα 

 

<div class="myclass">

    <img class="myimage1" src="http://s23.postimg.org/b2h2rz457/image.png" />

    <img class="myimage2" src="http://s13.postimg.org/jlyzyofkn/image.png" />

</div>

.myclass {

    position: relative;

    width: 300px;

    height: 200px;

}

img.myimage1 {

    position:absolute;

    width: 300px;

    height: 200px;

}

img.myimage2 {

    position:absolute;

    width: 80px;

    height: 80px;

    top: 10px;

    right: 10px;

}

[mixxmike]

Καλημέρα,

 

αν η μία εικόνα που θέλεις να χρησιμοποιήσεις είναι διαφανής και η άλλη είναι το υπόβαθρο τότε μπορείς να κάνεις κάτι τέτοιο:

<div>
    <img class="myImage" src="http://space-facts.com/wp-content/uploads/venus-transparent.png" />
</div>

.myImage {
	background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSFwMesOW4bFlOaRXNjAGvMvnTEu8TmHDlTjoqLHD69JU6Klwyy");
	background-size: 800px 800px;
}

Επεξ/σία 9 Μαρτίου 2017 από mixxmike

[uKalele]

 

Καλημέρα,

 

αν η μία εικόνα που θέλεις να χρησιμοποιήσεις είναι διαφανής και η άλλη είναι το υπόβαθρο τότε μπορείς να κάνεις κάτι τέτοιο:

<div>
    <img class="myImage" src="http://space-facts.com/wp-content/uploads/venus-transparent.png" />
</div>

.myImage {
	background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSFwMesOW4bFlOaRXNjAGvMvnTEu8TmHDlTjoqLHD69JU6Klwyy");
	background-size: 800px 800px;
}

Οταν προσπαθω να το κανω ετσι μου βγαινει για καποιο λογο ετσι:      https://www.w3schools.com/code/tryit.asp?filename=FDH23ZD42UEK

[mixxmike]

Δες αυτό:

https://www.w3schools.com/code/tryit.asp?filename=FDI39F1T2M0K

για να καταλάβεις πως λειτουργεί.

Απ' ότι είδα όμως στο παράδειγμά σου, δεν είναι κάποια από τις εικόνες που χρησιμοποιείς διαφανής,

οπότε με την λύση που σου πρότεινα δεν πρόκειται να δεις την εικόνα υπόβαθρο που βρίσκεται από πίσω.