使用背景尺寸时移动背景位置:盖子
使用背景尺寸时移动背景位置:盖子
提问于 2018-02-16 01:49:50
我有一个带有背景图像的滑块。当滑块改变幻灯片时，背景图像上的位置也会发生变化，以创建一个移动的背景效果。
如下所示：
.carousel {
background-repeat: no-repeat;
transition: background 1.5s ease-in;
background: url('./slider_bg');
background-attachment: fixed;
}
.carousel.bg0 {
background-position: 0%;
}
.carousel.bg1 {
background-position: 50%;
}
.carousel.bg2 {
background-position: 100%;
}这是可行的，但如果屏幕大小超过背景图像大小(比如说1920年的宽度)，就会有重复。我想使用background-size: cover;来解决上述重复，但是如果我使用它，移动背景效应就失去了。
有什么见解吗？
编辑：
为了更清楚地说明上面的代码，1920x1080的图像和1366x768的屏幕res，当类随着新的背景位置发生变化时，图像中似乎没有移动。但是如果我改变屏幕的高度或者缩小屏幕的宽度，就会有运动。有什么想法吗？
回答 1
Stack Overflow用户
发布于 2018-02-16 01:54:54
将background-repeat: no-repeat;放在carousel类的底部。另外，您可以尝试使用background-size: contain;，我认为这是您正在寻找的效果。
这里有一个小提琴：https://jsfiddle.net/e4b9z2to/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48824018
复制相关文章
点击加载更多
相似问题
自定义UiSlider IOS 6
iOS - UISlider的自定义镜像
自定义ios中的进度视图/ UISlider
UISlider action - iOS
iOS:自定义UISlider中的图像大小
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
