Div háttere különböző böngészőkben máshogy néz ki

Div háttere különböző böngészőkben máshogy néz ki
2021-12-23T12:30:04+01:00
2022-01-05T11:58:59+01:00
2022-10-15T21:21:30+02:00
GZolee79
Sziasztok 

Abban szeretnék segítséget kérni, hogy a divek háttere minden böngészőben ugyanúgy nézzen ki.

Jelenleg a fitefox-ben sok kis karácsonyfa van. (Minden karácsonyfa egy külön div háttere.
A chromban pedig egy nagy karácsonyfa van. :) 

Azt szeretném ha a chromben is sok kicsi fa lenne.

html kód:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="hu"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="hu-hu" /> <link href="css/kepeslap.css" rel="stylesheet" type="text/css" /> <title>próba</title> </head> <body> <div id="post_card"> <div class="memory_game"> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> <label class="flip3D"><input type="checkbox" /><div class="item"><div class="back"></div><div class="front" ></div></div></label> </div> </div> </body> </html>
CSS kód:

html { background: url("../postcard_background.png") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } body { height: 98%; text-align: center; } #post_card { display: block; margin: 0 auto; margin-top: 20px; width: 1569px; height: 884px; vertical-align: middle; } .memory_game { background: url("../postcard.png") no-repeat center center; display: grid; grid-gap: 0rem; background-color: azure; padding: 0px; float: left; grid-template-columns: repeat(6, 1fr); } .flip3D { margin: 0; width: 262px; height: 221px; box-sizing: border-box; border-style: solid; border-width: thin; float: left; cursor: pointer; } .flip3D input[type="checkbox"] { display:none; } .flip3D:hover { border-width: medium; } .item { display: block; margin-left: auto; margin-right: auto; position: relative; box-sizing: border-box; /* background-color: blueviolet;*/ /* box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.5);*/ width: 262px; height: 221px; } .item > .front { position:absolute; width: 262px; height: 221px; margin: 0; box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.5); background: url("../xmas_tree.png") no-repeat center fixed; background-size: contain; background-color: #3A4578; box-sizing: border-box; backface-visibility: hidden; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); -webkit-transition: -webkit-transform .5s linear 0s top 0.5s; transition: transform .5s linear 0s; } .item > .back { position:absolute; width: 262px; height: 221px; margin: 0; background-color: aliceblue; box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.5); box-sizing: border-box; backface-visibility: hidden; -webkit-transform: perspective( 600px ) rotateY( 180deg ); transform: perspective( 600px ) rotateY( 180deg ); -webkit-transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D input[type="checkbox"]:checked +.item > .front { -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .flip3D input[type="checkbox"]:checked +.item > .back { -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }
Előre is köszönöm!

Z.
Mutasd a teljes hozzászólást!
Csatolt állomány
Szia!

background:url("../xmas_tree.png") no-repeat center;

a fixed a végére nem kell.

.item > .front { position:absolute; width: 262px; height: 221px; margin: 0; box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.5); background: url("../xmas_tree.png") no-repeat center; background-size: contain; background-color: #3A4578; box-sizing: border-box; backface-visibility: hidden; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); -webkit-transition: -webkit-transform .5s linear 0s top 0.5s; transition: transform .5s linear 0s; }
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd