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