css文字背景蒙版
今天，我们将逐步采用一种非常酷的技术，您可以使用该技术来创建一种效果，该效果有点像视差滚动，但是不需要任何JavaScript； 可以通过纯CSS非常简单地实现。
首先查看现场演示 ，以了解要学习的内容（您需要在台式机/笔记本电脑上查看效果）。
该技术可用于创建出色的产品描述页面，甚至类似于Powerpoint / Keynote演示的内容，并且非常适合用于在线故事插图。
这是您的操作方式。
一切都在CSS中
这项技术的关键是CSS background-attachment: fixed; ，自CSS 2.1开始提供给我们。 应用了此样式的任何背景图像都将相对于窗口（而不是其所应用的元素）保持在固定位置。 我们将使用它来使插图保持在原处，而我们的内容将沿着它独立滚动。
此CSS属性需要注意的几件事是，由于背景图像将相对于窗口固定，因此它们的位置不会像常规背景图像那样受边距之类的东西影响。
您还应该知道，尽管该属性在所有台式机浏览器中都能很好地运行，但是它目前在Chrome移动版上不起作用，并且在其他移动浏览器上可能会有些生涩。 因此，尽管您的访问者仍然可以看到您的图像，但是滚动效果本身最好在桌面平台上查看。
怎么做的
实现您在演示中看到的基本步骤是：
- 创建一个容器元素并向其中添加内容。
- 将容器（在我们的情况下为
div）设置为在宽度约50％的一侧具有填充物，因此将内容物推到另一侧。 - 添加背景图像（宽度也应为50％左右），并将其放置在内容的另一侧。
- 设置
background-attachment: fixed;并观看滚动魔术！
让我们逐步了解所有这些情况。 您将要获取本教程的源文件 ，以便获得所需的图像。
1.基本设置
首先创建一个项目文件夹并向其中添加一个index.html文件以及一个CSS 文件夹，其中添加了名为style.css的文件。 将下载的源文件zip中的四个图像复制并粘贴到名为images的文件夹中。
将此HTML添加到index.html ：
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Visual Demonstration of background-attachment: fixed;</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Alike|Roboto:900" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content right illustration_01">
<h2>Scroll Down and Watch What Happens</h2>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy- chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat- pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to l
最低0.47元/天 解锁文章
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
