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

enter image description here

编辑：

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

enter image description here

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

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

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

Answer 2

给对侧边距和浮点数给出一个正值（意味着如果你想向左移动-20px，向右移动该div并给右边距给出正值

使用负保证金的替代方案？

2 个答案: