Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery计算图像背景位置顶部位置?_Javascript_Jquery_Html_Css_Background Position - Fatal编程技术网

Javascript jQuery计算图像背景位置顶部位置?

Javascript jQuery计算图像背景位置顶部位置?,javascript,jquery,html,css,background-position,Javascript,Jquery,Html,Css,Background Position,我在CSS中将图像设置为居中: background-position: center center; 但我想知道它现在的最高位置,在它被设置为中心后,我如何用jQuery或纯javaScript计算它呢 .parallax3{ 位置:相对位置; 背景位置:中心; 背景重复:无重复; 背景尺寸:封面; 背景图像:url('https://picsum.photos/g/200/600'); 身高:100%; } .标语{ 字体大小:2.5vw; 字母间距:0.05em; 填充:25%25%;

我在CSS中将图像设置为居中:

background-position: center center;
但我想知道它现在的最高位置,在它被设置为中心后,我如何用jQuery或纯javaScript计算它呢

.parallax3{
位置:相对位置;
背景位置:中心;
背景重复:无重复;
背景尺寸:封面;
背景图像:url('https://picsum.photos/g/200/600');
身高:100%;
}
.标语{
字体大小:2.5vw;
字母间距:0.05em;
填充:25%25%;
}
.grid-x{
边框:1px纯红;
}
.细胞{
边框:1px纯蓝色;
}

Lorem ipsum dolor sit amet


正如我在上面评论的那样,我们需要找到公式,因此我们的想法是依靠
背景位置:中心
背景大小:封面
的逻辑。因此,由于图像总是会被拉伸,我们有两种可能性:

  • 图像的顶部将与div的顶部相同,因此top=0
  • 图像的高度将比div长,顶部将隐藏,因此顶部0&&diffh>0){ //图像比div小,因此它应该至少以最大差值变大 if(diffh>diffw*比率){ //此处两个高度相等,因此顶部位置=0 控制台日志(0); }否则{ //图像的高度将更大,因此顶部位置<0 var newH=(wim+diffw)*比率; console.log((h-newH)/2) } }否则如果(diffw>0){ //如果div更大,则仅显示宽度,因此图像宽度将拉伸,高度将更大,顶部<0; var newH=(wim+diffw)*比率; console.log((h-newH)/2) }否则如果(差异>0){ //只有高度更大,因此图像高度将拉伸,并且两个高度都将等于div和top=0 控制台日志(0); }否则{ //图像在这种情况下更大,所以我们与ABS值开始相同的逻辑,但我们将减小大小,因此我们考虑最低值。 if(数学绝对值(diffh)<数学绝对值(diffw)*比率){ //此处两个高度相等,因此顶部位置=0 控制台日志(0); }否则{ //图像的高度将保持较大,因此顶部位置<0 var newH=(wim+diffw)*比率; console.log((h-newH)/2) } } } 获得顶部(); $(窗口)。调整大小(函数(){ 获得顶部() })
  • 正文{
    高度:100vh;
    }
    .视差3{
    位置:相对位置;
    背景位置:中心;
    背景重复:无重复;
    背景尺寸:封面;
    背景图像:url('https://picsum.photos/g/200/600');
    身高:100%;
    }
    
    
    类似于
    $(“.parallax3”).position()的东西。top
    不起作用吗?还是我失踪了something@OmarEinea这将与div not的位置相关background@OmarEinea它得到0,这是不正确的。哦,我明白了,图像本身的位置!首先,你需要找到公式。。图像在中心,所以它的中心在中心,所以你从中心向上移动图像的高度/2减去div/2的高度。。。如果图像没有溢出,则会溢出negative@laukok您用作背景的图像的原始大小:)因为我知道我使用了这些值,但我们可以使动态图像得到它。所以我需要先得到图像的大小!:-)@是的,但我认为这部分比较容易;)@请告诉我它在您的情况下是否运行良好,以及值是否正确;)@我发现我的逻辑有错误,所以更新了我的代码:)