Question

我有div块，其中包含以下样式：

.promo-blocks .first-appointment {
    background-image: url("../images/41d000_e4b9806a75b61053f1d6d4ccab8903df.png_srz_980_345_85_22_0.50_1.20_0 (2).00_png_srz");

    position: relative;
    background-color: #82B440;
    background-position: left;
    background-repeat: no-repeat;
    background-position-x: -97%;
    background-size: contain;

}

当我将页面的比例增加到75％或更低时，我的background-image会转移到左侧。如何在left bottom位置修复此背景并使用中心文本的常量填充？

Answer 1

在resize事件

上使用jQuery尝试此操作

$( window ).resize(function() {
   var size = ...
   $(".promo-blocks .first-appointment").css("background-position-x",size);
});

根据您需要的逻辑计算size pram

例如

1）保持窗口旧尺寸并在窗口调整大小事件中采用新尺寸并根据该值的差异设置background-position-x

2）你可以使用屏幕宽度的％差异等。

Answer 2

我认为这就是这条线：

background-position-x: -97%;

没有尝试。

也许

background-position: left;

如何在增加页面比例后修复背景图像位置？

2 个答案: