Css 视差背景图像拟合div

Css 视差背景图像拟合div,css,bootstrap-4,parallax,Css,Bootstrap 4,Parallax,我正在尝试创建一个视差背景作为站点的分隔符。背景图像似乎只占其应有大小的一半左右,周围有一个奇怪的白色边框。我似乎在我的代码中找不到任何可能导致这种情况的东西,无论我做什么,我要么在内部div上有边框,要么有滚动条。我只需要背景图像来适应div的空间,以便在该部分中形成滚动视差 我尝试过溢出:隐藏播放各种高度/宽度组合,包括calc100vh*2,以使图像更大。它似乎要做的唯一一件事是更改容器中的图像,它看起来几乎像一个子容器,但上面没有子容器。我还玩过变换、变换原点、透视图、比例以及我在谷歌和

我正在尝试创建一个视差背景作为站点的分隔符。背景图像似乎只占其应有大小的一半左右,周围有一个奇怪的白色边框。我似乎在我的代码中找不到任何可能导致这种情况的东西,无论我做什么,我要么在内部div上有边框,要么有滚动条。我只需要背景图像来适应div的空间,以便在该部分中形成滚动视差

我尝试过溢出:隐藏播放各种高度/宽度组合,包括calc100vh*2,以使图像更大。它似乎要做的唯一一件事是更改容器中的图像,它看起来几乎像一个子容器,但上面没有子容器。我还玩过变换、变换原点、透视图、比例以及我在谷歌和这里能找到的任何东西

html,正文{ 身高:100%!重要; 边际:0px; 填充:0px; } 输入、选择、文本区域{ 盒影:嵌入0.2px4pHSLA0,0%,0%,0.13; } .ico{ 宽度:50px!重要; 高度:50px!重要; } 导航{ 位置:固定!重要; z指数:999; 宽度:100vw; } .content_head{ 背景色:浅绿色; } .内容{ 背景色:蓝紫色; } .内容物{ 不透明度:0; 高度:50vh; } .后垫片{ 不透明度:0; } .背景1{ 背景图片:urlmages/IMG_1164.JPG; 背景剪辑:边框框; 背景尺寸:封面; 身高:100%!重要; 宽度:100%!重要; 最小高度:100%!重要; 最小宽度:100%!重要; } .后台组{ 最大高度:75vh!重要; } .容器液体{ 填充:0!重要; } /*视差样式归功于:https://keithclark.co.uk/articles/pure-css-parallax-websites */ .视差{ 透视图:1px; 高度:100vh; 溢出x:隐藏; 溢出y:自动; } .视差层{ 位置:绝对位置; transform-origin-x:100%; 排名:0; 右:0; 底部:0; 左:0; } .视差{ 转化:translateZ0; 高度:100vh; } .视差层{ 位置:绝对位置; 宽度:30%!重要; 高度:50vh!重要; 排名:0; 右:0; 底部:0; 左:自动; 保证金:0; 转换:translateZ-1px; -webkit-transform-origin-y:100%100%0px; -moz变换原点:100%100%0px; -ms变换原点:100%100%0px; 变换原点:100%100%0px; } .视差组{ 位置:相对位置; 高度:100vh; 变换样式:保留-3d; 溢出:自动!重要; } 内容库 内容库2 严格地说,我认为它实际上不是一个边框,但更重要的是背景图像比整个DIV元素小。

身体 html{ 保证金:0; 填充:0; } .包装纸{ 高度:100vh; 溢出x:隐藏; 溢出y:自动; 透视图:2px; } .科{ 位置:相对位置; 高度:100vh; 显示器:flex; 对齐项目:居中; 证明内容:中心; 颜色:白色; 文本阴影:0 0 5px 000; } 视差{ /*显示并定位伪元素*/ 内容:; 位置:绝对位置; 排名:0; 右:0; 底部:0; 左:0; 变换:translateZ-1px比例1.5; 背景大小:100%; z指数:-1; } .静态{ 背景:红色; } .bg1::之后{ 背景图片:url'https://images.unsplash.com/photo-1567170578400-9d182981f2a1?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=750&q=80'; } .bg2::之后{ 背景图片:url'https://images.unsplash.com/photo-1567170566770-eea3bb0b16ed?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=750&q=80'; } 静止的 视差 静止的 视差 静止的
放置正确的图像路径后没有边框,滚动是因为您的.parallax类overflow-y:auto。在div元素中有一个水平和垂直滚动,我想去掉它。正确的图像路径是什么意思?正确的图像路径在img标签中放置正确的图像路径后,我看不到任何边界,你能截图并向我们展示你所说的边界吗。是否要从代码中删除所有滚动条?提供了一个屏幕截图,并在当前编辑中进行了说明。因此,边界问题已解决,现在您希望在div中覆盖图像?由于您的截图显示内容库1和内容库2之间有图像,但您的代码显示不同,请提供完整的代码^ ^我喜欢。我将实施这一点,并接受这作为答案,如果它与网站的其余部分的工作。这正是我想要的。谢谢。效果很好,完全符合我的需要 ! 非常感谢。