html – 使用负余量的替代方法？

我正在使用负边距将我的图像放在背景上,但是当我放大倍数时,它会转换并扭曲图像.放大时,由于负边距,右侧的方块向上移动.

请在下面找到我正在使用的代码：

<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;
    }
}

编辑：

这是当我放大太多因为负边距时会发生什么.

解决方法

免责声明：这个答案是基于我认为你所要求的.有关您的问题的更具体的解决方案,请详细说明您要实现的目标.

看起来您正在使用负边距和填充来补偿您的图像相对位置(默认情况下).为了避免破坏您的布局,您可以通过以下两种方法之一实现相同的操作：

方法1(不理想)：将背景图像移动到其当前容器之外,并进入更广泛的文档上下文.然后绝对定位您的图像,使其不会影响您的布局的其余部分：

HTML
<img class="background" src="somedir/background.png">
<div class="platform-row">....</div>

CSS
.background {
    position: absolute;
    top: 0;  /* defining the top/left/bottom/right declarations are important! */
    left: 0;
    /* bottom: 0; apply these two if you want your image to stretch and fill the entire viewport */
       /*right: 0; */
    height: 100%;
    width: auto;
}

方法2(更好)：将背景图像作为背景应用于身体(或最好是最大高度/宽度包装).

HTML
<div class="page-wrapper">
    <div class="platform-row">....</div>
    <!-- other page content -->
</div> <!-- end of page-wrapper -->



CSS
.page-wrapper {
    background: transparent url('/images/background.png') 0 0 no-repeat;
    /* fix the image in place (not supported in older browsers) */
    background-position: fixed;
}

此外,您可以使用位置：固定样式(您已经定义的),而不是使用边距来定位.platform-row-Box,但您需要定义顶部/右侧/底部/左侧值.

.platform-row-Box {
    position: fixed;
    top: 40px;
    right: 20%;
}