html - 使用负 margin 的替代方法？

Question

我使用负边距将我的图像放在背景上，但是当我放大很多时，它会移动并使图像变形很多。由于负边距，在缩放时右侧的框会移到顶部。

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

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

编辑:

当我因为负边距放大太多时会发生这种情况。

Answer 1

免责声明:此答案基于我认为您的要求。如需更具体的问题解决方案，请更具体地说明您要实现的目标。

看起来您正在使用负边距和填充来补偿图像相对定位的事实(默认情况下)。为避免破坏您的布局，您可以使用以下两种方法之一实现相同的目的:

方法 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(更好):只需将背景图像作为 background 应用到正文(或者最好是最大高度/宽度包装器)。

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

此外，您可以简单地使用 position: fixed 样式(您已经定义)，而不是使用边距来定位您的 .platform-row-box ，但您需要定义 top/right/bottom/left 值。

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