我正在使用负边距将我的图像放在背景上,但是当我放大倍数时,它会转换并扭曲图像.放大时,由于负边距,右侧的方块向上移动.
请在下面找到我正在使用的代码:
<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%; }