Я использую отрицательный запас, чтобы поместить свое изображение на задний план, однако, когда я увеличиваю масштаб, он меняет и сильно искажает изображение. При масштабировании окна справа идет вверх, из-за отрицательного поля.
Ниже приведен код, который я использую: -
<div class="platform-row" style="float: right; margin-right: 145px; padding: 2px;">
<span><a href="download/index.html">
<img src="assets/Box.png" border="0" /></a></span><br>
<div class="platform-row-box">
SOME TEXT GOES HERE...................
</div>
<a href="download/index.html">
<div class="getmxit">Get ABC Now</div>
</a>
<div style="background: black; margin-top: 3px; width: 181px; opacity: .8; padding: 2px">
<span><a class="platform-icon apple" href="download/ios/index.html"></a></span>
<span><a class="platform-icon android" href="download/android/index.html"></a></span>
</div>
</div>
CSS
.platform-row {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
margin-top: -530px;
margin-left: 700px;
}
.platform-row .platform-row-box {
color: white;
font-size: 14px;
margin: 0 auto;
width: 181px;
opacity: .8;
margin-top: -170px;
position: fixed;
}
@media screen and (max-width: 640px) {
.platform-row {
padding-right: 55%;
}
}
@media screen and (max-width: 479px) {
.platform-row {
margin-top: 40px;
padding-right: 35%;
}
}
.platform-icon {
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
/**background-image: url("platform_icons-14a66f5cbf10a328f7b38e6070c26e62.png");**/
background-image: url("Home_Get.png");
display: inline-block;
height: 25px;
width: 25px;
margin-right: 0px;
opacity: 1;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.platform-icon {
background-image: url("platform_icons%402x-dfed2cc115fa8b344e08c9072408095a.png");
background-size: 454px 88px;
-webkit-background-size: 454px 88px;
}
}
EDIT:
Это то, что происходит, когда я увеличиваю слишком много из-за отрицательного поля.