开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >视差透明滚动效果，“幕”div放置在视差div之外

问视差透明滚动效果，“幕”div放置在视差div之外
EN

Stack Overflow用户

提问于 2019-02-22 15:54:25

回答 1查看 175关注 0票数 0

我有问题使我的“幕布”DIV透明，如果它在固定的div之外。在下面的例子中，我想要实现视差窗帘DIV的透明度，而不必将它放在视差DIV中。

https://jsfiddle.net/0kfapw35/

我知道如果DIVs像这样嵌套就可以实现：

<div class="parallax">
  <div class="parallax-curtain">
  </div>
</div>

https://jsfiddle.net/wamosjk/jfxb0kz1/

不幸的是，这对我不起作用。这有可能吗？

提前感谢！

twitter-bootstrap

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-23 11:10:28

示例中的问题是，如果parallax-curtain不是parallax元素的子元素，那么在他后面只有body元素，该元素是白色的。如果更改body元素的background-color:red;，您将看到透明度确实应用于parallax-curtain，只是在您的示例中不可见，因为它与他后面的元素具有相同的颜色。

可以将parallax元素放在parallax-curtain后面，方法是添加position:sticky; z-index=-1; top:0;：https://jsfiddle.net/x837kwfb/60/

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54830763

复制

相关文章

滚动视差网页效果

网站 transform 前端设计原理

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

金鳞星溅

2023/04/11

1.8K0

css实现视差滚动效果

今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思，于是就做了一个，demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使用js来实现的，实际上，如果你对兼容性要求不是很高，比方说忽略IE浏览器，则我们使用简单的几行CSS代码就可以实现视差滚动效果了。 css有一个background-attachment属性作用是设置背景图像是否固定或者随着页面的其余部分滚动。这里要注意任何版本的 Internet Explorer （包括

李文杨

2018/03/14

3.8K0

CSS | 视差滚动 | 笔记

css 容器 background 笔记浏览器

image-20230720145639107css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。 perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。 translateX,translateY表现出在屏幕中的上下左右移动，transformZ 的直观表现形式就是大小变化，实质是 XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了 perspective 为 200px; 那么 transformZ 的值越接近 200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。（200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。

yiyun

2023/07/24

8530

CSS | 视差滚动 | 笔记

[先行者课程]--0312视差效果--课堂笔记

今天是3月12号，来学习一下视差滚动。严格来讲，它其实是一种网页效果，而不是一个前端组件，顶多是一个插件。插件，一般是用来实现网页上的一个或多个功能。而组件，是为实现网页的业务逻辑，而封装的一组功能代码。它一般是特定的，不特别的强调通用性。 //============ 视差滚动（Parallax Scrolling） parallax[ˈpærəˌlæks] n. 视差（量），视差角度; 它是一种比较优雅酷炫的页面展示的方式，今天咱们研究下视差滚动的原理和实现方式。视差的原理，视差就是从有一定

web前端教室

2018/02/06

9570

滚动视差？CSS 不在话下

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

Sb_Coco

2019/02/21

1.7K0

滚动视差？CSS 不在话下

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

Sb_Coco

2018/08/10

2K0

div:给div加滚动条　div的滚动条设置

java https 网络安全

<div style=” overflow:scroll; width:400px; height:400px;”></div>

全栈程序员站长

2022/09/14

6.2K0

动效案例：纯手工写一个滚动视差效果

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

前端达人

2020/04/08

1.4K0

动效案例：纯手工写一个滚动视差效果

【转】动效案例：纯手工写一个滚动视差效果

大家好，今天我们一起来实践一个滚动视差的动画效果。虽然我们不是设计师，不擅长PS、AE，但是我们完全可以通过前端技术设计一幅漂亮的画面，今天我们要设计一幅月下山间小道开车的画面。在介绍之前，我们首先了解下什么是滚动视差，有助于我们实现这个案例。

夏末浅笑

2020/05/21

1.3K0

【转】动效案例：纯手工写一个滚动视差效果

滚动视差？CSS不在话下

css 图像处理 javascript

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

IMWeb前端团队

2019/12/03

1.3K0

视差滚动技术的简介及运用

维基百科地址：https://en.wikipedia.org/wiki/Parallax_scrolling 视察滚动是计算机图形学以及网页设计中的技术。原理就是在二维场景中创建一个深度错觉，背景图像跟随摄影机移动的速度比前景图像要慢。该技术起源于20世纪30年代在传统动画中使用的多平面成像技术。视差滚动得益于在街机游戏 Moon Patrol 和 Jungle Hunt 中的推广。两款游戏都是在1982年发行。有一些视察滚动技术在1981年发行的街机游戏 Jump Bug 中已经使用。方法在街机系统

叙帝利

2018/01/17

2.8K0

动效案例：纯手工写一个滚动视差效果

大家好，今天我们一起来实践一个滚动视差的动画效果。虽然我们不是设计师，不擅长PS、AE，但是我们完全可以通过前端技术设计一幅漂亮的画面，今天我们要设计一幅月下山间小道开车视觉动效。在介绍之前，我们首先了解下什么是滚动视差，有助于我们实现这个案例。

前端达人

2020/04/01

2.1K0

动效案例：纯手工写一个滚动视差效果

html https java 网络安全 javascript

overflower：auto（内容溢出的时候出现滚动条；scroll会一直出现滚动条）

全栈程序员站长

2022/09/07

2.5K0

快速打造带有视差效果的ListView

listview android html

在上一篇博文中，我们实现了仿美团的下拉刷新。而今天的主题还是与 ListView 有关，这次是来实现具有视差效果的 ListView 。

俞其荣

2022/07/28

5780

快速打造带有视差效果的ListView

前端-滚动视差？CSS 不在话下

css https 网络安全

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

grain先森

2019/03/29

1.6K0

前端-滚动视差？CSS 不在话下

目前最流行的 5 大 Vue 动画库，使用后太炫酷了

vue.js css 图像处理

动画在交互方式中发挥着重要作用，它们可通过添加一些视觉风格来增强用户体验。在本文中，我们将研究和比较目前最流行的 Vue.js 动画库。

前端修罗场

2022/07/29

18.8K0

目前最流行的 5 大 Vue 动画库，使用后太炫酷了

算法：视差匹配是以图像对中任一幅图像为基准，其大小为该基准图像的大小，元素值为视差值的图像进行匹配。从立体图像对中提取包含了场景的距离信息的视差图进行匹配，一直是双目视觉研究中最为活跃的领域。

裴来凡

2022/05/29

8040

DIV展开收缩效果

<html> <head> <title>div展开收缩代码</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bo

botkenni

2022/01/10

1.9K0

滚动视差让你不相信“眼见为实”

react vue.js 图像处理 https css

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果。

前端森林

2020/04/23

2.2K0

滚动视差让你不相信“眼见为实”

Amazing！巧用 CSS 视差实现酷炫交互动效

css 编程算法容器图像处理 javascript

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。

Sb_Coco

2022/04/28

8260

Amazing！巧用 CSS 视差实现酷炫交互动效

相似问题

视差滚动效果

20

对div的反应-滚动-视差<视差提供器/>

10

使用体滚动值的JQuery页脚div视差滚动效果

12

滚动视图视差效果

132

仅使用css在其他div视差效果上滚动

11

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验