拉伸图像使其适合而不成为背景图像（视差）
[英]stretch image to fit without being background image (parallax)
问题描述
因此，我尝试创建“视差”效果。 但是，我所见的唯一方法是使用div并将其设置为固定而不重复。 唯一的问题是图像的顶部和侧面周围都有“边框”。 我认为这是因为div，是否有任何明智的解决方案？
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo parallax effect</title> <style> .parallax { /* The image used */ background-image: url("macbook.jpeg"); /* Set a specific height */ min-height: 410px; /* max-width: 100%;*/ /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-size: cover; padding: 0px 0px 0px 0px; } </style> </head> <body> <div class="parallax"></div> <div style="height:1000px;background-color: aliceblue;font-size:36px"> Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect. </div> </body> </html>
3 个解决方案
解决方案1
0 2019-02-27 03:41:56
只是删除身体的边缘希望它会起作用，请检查以下代码片段
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo parallax effect</title> <style> body { margin: 0 !important; } .parallax { /* The image used */ background-image: url("macbook.jpeg"); /* Set a specific height */ min-height: 410px; /* max-width: 100%; */ /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-size: cover; padding: 0px; } </style> </head> <body> <div class="parallax"></div> <div style="height:1000px;background-color: aliceblue;font-size:36px"> Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect. </div> </body> </html>
解决方案2
0 2019-02-27 03:42:13
从身体上去除边缘：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo parallax effect</title> <style> .parallax { /* The image used */ background-image: url("http://placekitten.com/410"); /* Set a specific height */ min-height: 410px; /* max-width: 100%;*/ /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: top; background-repeat: no-repeat; background-size: cover; padding: 0px 0px 0px 0px; } body { margin: 0; } </style> </head> <body> <div class="parallax"></div> <div style="height:1000px;background-color: aliceblue;font-size:36px"> Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect. </div> </body> </html>
解决方案3
0 2019-02-27 03:48:16
尝试从CSS的body标签中删除边距。 这是一个工作示例：
body {
margin: 0;
}
.parallax {
background-image: url("macbook.jpeg");
min-height: 410px;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
CSS：如何强制背景图像拉伸/压缩以适合 div，而不保持纵横比
[英]CSS: How to force background image to stretch/compress to fit div, without keeping aspect ratio
如何在类中使用CSS属性background拉伸或适合背景图像
[英]how to stretch or fit a background image using css attribute background in a class
背景图像适合带有引导程序列的div宽度和高度-PARALLAX
[英]background image fit on the div width and height with bootstrap columns - PARALLAX
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.