如何创建较短版本的视差？
如何创建较短版本的视差？
提问于 2021-04-05 01:53:58
基本上，我已经创建了6个图像的视差效果与桌面和移动媒体查询。图像在桌面模式下显示正常。然而，一旦我将屏幕缩小到移动模式，一些图像就会被切断，并且没有响应。正因为如此，我希望我的视差只在移动视图上显示4张图像，在桌面视图上显示常规的6张图像。我试着用我的媒体查询重新排列我的代码，以获得这一点，但我似乎想不出一种方法。我如何做到这一点，以便只有“可见”的图像只显示在移动视图？任何帮助都是非常感谢的。这是我的代码。
section.module h2 {
margin-bottom: 40px;
font-size: 30px;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
}
section.module.content {
padding: 40px 0;
background-color: #AFC9F1;
}
section.module.parallax {
height: 800px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-0 {
background-image: url("https://mms.businesswire.com/media/20170310005534/en/574694/5/NIO_EVE_04_Fr34.jpg");
height: 100vh;
opacity: 0.65;
}
section.module.parallax-1 {
background-image: url("https://mms.businesswire.com/media/20170310005534/en/574694/5/NIO_EVE_04_Fr34.jpg");
}
section.module.parallax-2 {
background-image: url("https://autodesignmagazine.com/wp-content/uploads/2017/03/2017031301_nio_eve.jpg");
}
section.module.parallax-3 {
background-image: url("https://www.nio.com/prod/s3fs-public/styles/tile_double_square_desktop_1x/public/2018-09/zip-eve-gallery-5.jpg?Agd8SYcynlrs7LqQu6N.GbrzxLw8vYJF&itok=hGg1N1lm");
}
section.module.parallax-4 {
background-image: url("https://cdn.vox-cdn.com/thumbor/bP1-Ysv4wJcYCMLrAoJv-T03Oto=/0x0:1920x1080/1400x1050/filters:focal(807x387:1113x693):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/53656791/EVE_005_Overhead.0.jpg");
}
section.module.parallax-5 {
background-image: url("https://cimg1.ibsrv.net/ibimg/hgm/1920x1080-1/100/595/nio-eve-concept-2017-sxsw_100595869.jpg");
}
/* Parallax Mobile */
@media (min-width: 200px) and (max-width: 899px) {
section.module.parallax-0 {
background-image: url("https://miro.medium.com/max/3840/1*LT87ktpOB50UhsrRJYjI5A.jpeg");
}
section.module.parallax-1 {
background-image: url("https://miro.medium.com/max/3840/1*LT87ktpOB50UhsrRJYjI5A.jpeg");
}
section.module.parallax-2 {
background-image: url("https://autodesignmagazine.com/wp-content/uploads/2017/03/2017031301_nio_eve.jpg");
}
section.module.parallax-3 {
background-image: url("https://www.nio.com/prod/s3fs-public/styles/tile_double_square_desktop_1x/public/2018-09/zip-eve-gallery-5.jpg?Agd8SYcynlrs7LqQu6N.GbrzxLw8vYJF&itok=hGg1N1lm");
}
section.module.parallax-4 {
background-image: url("https://cdn.vox-cdn.com/thumbor/bP1-Ysv4wJcYCMLrAoJv-T03Oto=/0x0:1920x1080/1400x1050/filters:focal(807x387:1113x693):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/53656791/EVE_005_Overhead.0.jpg");
}
section.module.parallax-5 {
background-image: url("https://cimg1.ibsrv.net/ibimg/hgm/1920x1080-1/100/595/nio-eve-concept-2017-sxsw_100595869.jpg");
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Parallax</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<section class="module parallax parallax-0">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-1">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-2">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-3">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-4">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-5">
<div class="container text-center"></div>
</section>
<script src="script.js"></script>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-05 02:06:03
您可以在移动视图的section.module.parallax类中使用background-size:contain。为了显示图片，你可以把display: none放在你不想在手机上显示的图片上。
如果我很理解你的话。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66944263
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号