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

概述我正在使用负边距将我的图像放在背景上,但是当我放大倍数时,它会转换并扭曲图像.放大时,由于负边距,右侧的方块向上移动. 请在下面找到我正在使用的代码： <div class="platform-row" style="float: right; margin-right: 145px; padding: 2px;"> <span><a href="download/inde 我正在使用负边距将我的图像放在背景上,但是当我放大倍数时,它会转换并扭曲图像.放大时,由于负边距,右侧的方块向上移动.

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

<div  >            <span><a href="download/index.HTML">                <img src="assets/Box.png" border="0" /></a></span><br>            <div >                SOME TEXT GOES HERE...................            </div>            <a href="download/index.HTML">                <div >Get ABC Now</div>            </a>            <div >                <span><a  href="download/ios/index.HTML"></a></span>                <span><a  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  src="somedir/background.png"><div >....</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 >    <div >....</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%;}

总结

以上是内存溢出为你收集整理的html – 使用负余量的替代方法？全部内容，希望文章能够帮你解决html – 使用负余量的替代方法？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。