视差图获取视差
最近，我们的一位读者问我们如何为 WordPress 主题添加视差效果？视差效果是一种网页设计趋势，其中背景图像的滚动速度比前景内容慢。在本文中，我们将向您展示如何轻松地向任何 WordPress 主题添加视差效果。
最近，有读者问我们如何为WordPress主题添加视差效果？视差效果是一种网页设计趋势，其中背景图像比前景内容滚动得更慢。在本文中，我们将向您展示如何轻松地向任何 WordPress 主题添加视差效果。
什么是视差效果？ （What is a Parallax Effect?）
Parallax effect is a modern web design technique where background element scrolls slower than foreground content. This effect adds depth to the 背景图片 and makes them feel interactive.
视差效果是一种现代的Web设计技术，其中背景元素的滚动速度比前景内容慢。 这种效果增加了背景图深度，并使其具有交互性。
Parallax effect can be used on 登陆页面, longform content, 销售页面, or homepage of a 商业网站. It is a great way to highlight different sections on a lengthy page.
视差效果可用于企业网站 登录页面 ，长篇内容， 销售页面或主页优越的 。 这是在冗长的页面上突出显示不同部分的一种好方法。
Many 高级 WordPress 主题 come with built-in parallax effect on their homepage. You can also use parallax effect in most WordPress 页面构建器插件 as well.
许多高级 WordPress 主题在其首页上都带有内置视差效果。 您还可以在大多数WordPress 页面构建器插件使用视差效果。
However, not all themes have a built-in parallax effect, and you may not want to use a page builder to 创建自定义页面布局 just for a parallax effect.
但是，并非所有主题都具有内置的视差效果，并且您可能不希望使用页面构建器仅为视差效果创建自定义页面布局 。
让我们看看如何轻松地为任何 WordPress 主题添加视差背景效果。
让我们看看如何轻松地为任何 WordPress 主题添加视差背景效果。
方法1：使用插件向任何WordPress主题添加视差效果 （Method 1: Add Parallax Effect to Any WordPress Theme Using Plugin）
此方法不需要您向 WordPress 主题添加任何代码。它更容易并推荐给大多数用户。
此方法不需要您向 WordPress 主题添加任何代码。它更简单，推荐大多数用户使用。
First thing you need to do is install and activate the 高级 WordPress 背景 plugin. For more details, see our step by step guide on 如何安装 WordPress 插件.
您需要做的第一件事是安装并激活高级 WordPress 背景插件。 有关更多详细信息，请参阅有关如何安装 WordPress 插件步指南。
Upon activation, you need to edit the page or post where you want to add the parallax effect. You will notice the new ‘Advanced WordPress Backgrounds’ button in the 可视化编辑器.
激活后，您需要编辑页面或发布要添加视差效果的位置。 您会在在可视化编辑器中注意到新的“高级WordPress背景”按钮。
单击它将弹出一个弹出窗口，您可以在其中更改要添加的背景的不同设置。
单击它将弹出一个弹出窗口，您可以在其中更改要添加的背景的不同设置。
首先，您需要选择图像作为背景类型，然后选中“拉伸”选项。
首先，您需要选择图像作为背景类型，然后选中“拉伸”选项。
接下来，您需要单击“选择图像”按钮来上传或选择要使用的图像。确保您使用的是大图像，否则它会出现像素化。
接下来，您需要单击“选择图像”按钮来上传或选择您要使用的图像。确保您使用的是大图像，否则它会出现像素化。
之后，您需要通过选择视差类型来启用视差。有多种样式可供您尝试。最常用的视差效果是滚动。
之后，您需要通过选择视差类型来启用视差。有很多风格你可以尝试。最常用的视差效果是滚动。
单击“插入”按钮继续。
单击插入按钮继续。
该插件现在将在您的 WordPress 帖子编辑器中添加一个短代码。它看起来像这样：
该插件现在将向您的 WordPress 帖子编辑器添加一个短代码。它看起来像这样：
[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”100 00”]
[nk_awb awb_type =”图像” awb_stretch =”真” awb_image =”22” awb_image_size =”全” awb_parallax =”滚动” awb_parallax_speed =”0.5” awb_mouse_parallax =”””真”awb_mouse_parallax_b =] mouse_parallax_size = 10000
您的内容在这里
您的内容放在这里
[/nk_awb]
[/nk_awb]
Replace “您的内容在这里” with your own content and then save your page.
用您自己的内容替换“这里的内容”，然后保存页面。
您现在可以访问您的网站以查看其运行情况。
现在您可以访问您的网站以查看其运行情况。
方法2：使用CSS将视差效果添加到任何WordPress主题 （Method 2: Add Parallax Effect to Any WordPress Theme with CSS）
此方法要求您对 HTML / CSS 以及 WordPress 主题的工作原理有一定的了解。
此方法要求您对 HTML/CSS 以及 WordPress 主题的工作原理有一定的了解。
First, you will need to upload the image you want to use for parallax effect to your WordPress media library by visiting 媒体 » 添加新内容 page.
首先，您需要访问媒体 » 添加新内容页面，将要用于视差效果的图像上传到WordPress媒体库。
上传图片后，您需要通过在WordPress媒体库中编辑图片来复制图片URL。
上传图片后，您需要通过在WordPress媒体库中编辑图片来复制图片URL。
Next, you need to add the following HTML into the page or post where you want to show the parallax effect. You can also add this HTML into your WordPress theme or 儿童主题.
接下来，您需要将以下HTML添加到要显示视差效果的页面或页面中。 您也可以将此HTML添加到WordPress主题或在副主题中 。
<div class="parallax">
<div class="parallax-content">
Your content goes here...
</div>
</div>
接下来，您需要将以下自定义 CSS 添加到您的 WordPress 主题。
接下来，您需要将以下自定义 CSS 添加到您的 WordPress 主题。
.parallax {
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}
不要忘记将背景图片 URL 替换为您自己的背景图片。
不要忘记将背景图像 URL 替换为您自己的。
您现在可以保存更改并访问您的网站以查看其实际效果。
现在您可以保存更改并访问您的网站以查看它们的实际效果。
注意：您可能需要调整 CSS 以适应您网站的布局。
注意：您可能需要调整 CSS 以适应您的网站布局。
We hope this article helped you learn how to easily add parallax effect to any WordPress theme. You may also want to see our mega list of the 最想要的 WordPress 提示、技巧和技巧.
我们希望本文能帮助您学习如何轻松地将视差效果添加到任何WordPress主题。 您可能还希望查看我们的大型列表，其中包括最受欢迎的 WordPress 提示、技巧和技巧 。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-a-parallax-effect-to-any-wordpress-theme/
视差图获取视差