css⽂字背景蒙版_使⽤CSS创建蒙版的背景效果
css⽂字背景蒙版
今天，我们将逐步采⽤⼀种⾮常酷的技术，您可以使⽤该技术来创建⼀种效果，该效果有点像视差滚动，但是不需要任何JavaScript； 可以通过纯CSS⾮常简单地实现。
⾸先查看 ，以了解要学习的内容（您需要在台式机/笔记本电脑上查看效果）。
该技术可⽤于创建出⾊的产品描述页⾯，甚⾄类似于Powerpoint / Keynote演⽰的内容，并且⾮常适合⽤于在线故事插图。
这是您的操作⽅式。
⼀切都在CSS中
这项技术的关键是CSS background-attachment: fixed; ，⾃CSS 2.1开始提供给我们。 应⽤了此样式的任何背景图像都将相对于窗⼝（⽽不是其所应⽤的元素）保持在固定位置。 我们将使⽤它来使插图保持在原处，⽽我们的内容将沿着它独⽴滚动。
此CSS属性需要注意的⼏件事是，由于背景图像将相对于窗⼝固定，因此它们的位置不会像常规背景图像那样受边距之类的东西影响。
您还应该知道，尽管该属性在所有台式机浏览器中都能很好地运⾏，但是它⽬前在Chrome移动版上不起作⽤，并且在其他移动浏览器上可能会有些⽣涩。 因此，尽管您的访问者仍然可以看到您的图像，但是滚动效果本⾝最好在桌⾯平台上查看。
怎么做的
实现您在演⽰中看到的基本步骤是：
1. 创建⼀个容器元素并向其中添加内容。
2. 将容器（在我们的情况下为div ）设置为在宽度约50％的⼀侧具有填充物，因此将内容物推到另⼀侧。
3. 添加背景图像（宽度也应为50％左右），并将其放置在内容的另⼀侧。
4. 设置background-attachment: fixed; 并观看滚动魔术！
让我们逐步了解所有这些情况。 您将要本教程 ，以便获得所需的图像。
1.基本设置
style.css的⽂件。 将下载的源⽂件
CSS ⽂件夹，其中添加了名为style.css
⾸先创建⼀个项⽬⽂件夹并向其中添加⼀个index.html
index.html⽂件以及⼀个CSS
images的⽂件夹中。
zip中的四个图像复制并粘贴到名为images
index.html ：
将此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="//leapis/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 sist        <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 d        <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        <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 stop        <p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to hap        <p>`Well!' thought Alice to herself, `after such a fall as this, I shall think nothing of tumbling down stairs! How brave they'll all think me at home! Why, I wouldn    </div>
</body>
</html>
我们在这⾥要做的是设置基本HTML Shell，加载样式表和某些Google字体，然后创建将要应⽤此技术
的第⼀个div内容容器。
div容器具有三个类：
1. .content⽤于设置所有内容容器共有的⼀些属性。
2. .right标识此容器应具有右对齐的内容（稍后我们还将使⽤左对齐的容器）
3. .illustration_01⽤于设置此容器的特定背景图像和颜⾊
造型
style.css⽂件中添加⼀些基本的规范化和格式化代码：
现在我们已经准备好⼀些CSS。 ⾸先在您的style.css
* {
box-sizing: border-box;
}
html {
font-size: 1em;
font-family: 'Alike';
background-color: #262626;
color: #d9d9d9;
}
body {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Roboto';
css特效文字line-height: 1.313em;
}
h1 {
font-size: 3em;
margin: 0.563em 0;
}
h2 {
font-size: 2.25em;
margin: 0.625em 0;
}
h3 {
font-size: 1.5em;
margin: 1.313em 0;
}
h4 {
font-size: 1.313em;
margin: 1.313em 0;
}
h5 {
font-size: 1.125em;
margin: 1.313em 0;
}
h6 {
font-size: 1em;
margin: 0.75em 0;
}
现在是.content类。 将此添加到样式表的底部：
.content {
font-size: 1.875rem;
color: #262626;
background-size: 49% auto;
background-attachment: fixed;
background-repeat: no-repeat;
}
此类是⼤多数魔术发⽣的地⽅。 对于⽂本，我们设置字体⼤⼩和颜⾊。 对于背景，您会看到我们⾸先将background-size设置为49％⾃动。
这意味着背景图像将始终拉伸或缩⼩以填充页⾯宽度的49％，并且⾼度将按⽐例调整。 我们使⽤49％⽽不是50％的值，因为否则Firefox 在屏幕中间显⽰出奇怪的线条。
然后，我们设置了background-fixed ，正如您从上⾯的描述中已经知道的那样，它使背景图像在滚动时保持原状，并使其相对于窗⼝⽽不是
它所应⽤的容器定位。
最后，我们设置background-repeat: no-repeat; 以确保我们的图⽚仅在页⾯上显⽰⼀次。
接下来，将.right类添加到样式表中：
.right {
padding: 1.618em 6.472em 3.236em 50%;
background-position: 0 50%;
}
最后⼀课将⽂本内容放在屏幕的⼀半，背景图像放在另⼀半。
background-position设置告诉背景图像将其⾃⾝定位在窗⼝左侧的零像素位置，并将其⾃⾝从窗⼝顶部向下对齐⼀半。
最后，添加.illustration_01类：
.illustration_01 {
background-color: #00c17b;
background-image: url("../images/minipadwhite.png");
}
这将设置我们想要⽤于此内容容器的特定背景图像和颜⾊。
查看您的⽹站，您现在应该看到以下内容：
向下滚动时，您应该会看到内容随图像⼀起滑动，⽽图像仍保持在原位置。
2.添加第⼆个容器
让我们添加另⼀个内容容器，该容器的内容向左对齐。
将此内容容器HTML添加到最后⼀个div下⾯：
<div class="content left illustration_02">
<h2>Fixed Background Scrolling Effect</h2>
<p>Down, down, down. Would the fall never come to an end! `I wonder how many miles I've fallen b
y this time?' she said aloud. `I must be getting somewhere      <p>Presently she began again. `I wonder if I shall fall right through the earth! How funny it'll seem to come out among the people that walk with their heads do      <p>Down, down, down. There was nothing else to do, so Alice soon began talking again. `Dinah'll miss me very much to-night, I should think!' (Dinah was the      <p>Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage      <p>There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she    </div>
请注意，这次我们使⽤的是.left⽽不是.right类，并且我们增加了插图编号，因此将.illustration_01类替换为.illustration_02
将以下两个新类添加到样式表中：
.left {
padding: 1.618em 50% 3.236em 6.472em;
background-position: 100% 50%;
}
.illustration_02 {
background-color: #e8697b;
background-image: url("../images/minipadblack.png");
}
这次，我们在容器的右侧应⽤了50％的填充，因此内容将被推到左侧，背景⽔平放置在100％的位置，即⼀直到右侧。 我们还为该容器的
背景添加了不同的颜⾊和图像。
再次签出您的⽹站，然后开始向下滚动。 当您到达第⼀个容器的末尾时，您应该看到第⼆个容器开始出现，擦洗第⼀个图像的顶部并逐渐
露出第⼆个图像。
3.插⼊分隔符
如果两个容器之间有分隔符，则可以增强此技术的效果，因此现在就添加它。
在两个容器div之间添加以下HTML：
<section class="separator">
<h3>Another Section Starts Here</h3>
</section>
并将.separator类添加到样式表中：
.separator {
font-size: 1.875rem;
padding: 1.618em 0;
text-align: center;
}
在刷新站点时，您现在应该在容器之间使⽤漂亮的分隔符：
4.第三和第四集装箱
现在，您可以输⼊其余分隔符和内容容器的代码。
将此HTML添加到现有div下⽅：
<section class="separator">
<h3>Another Section Starts Here</h3>
</section>
<div class="content right illustration_03">
<h2>Great For Product Presentations</h2>
<p>Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was t      <p>Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the pas
sage into the lo      <p>There seemed to be no use in waiting by the little door, so she went back to the table, half hoping she might find another key on it, or at any rate a book o      <p>It was all very well to say `Drink me,' but the wise little Alice was not going to do that in a hurry. `No, I'll look first,' she said, `and see whether it's marked "p      <p>However, this bottle was NOT marked `poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry- tart, c    </div>
<section class="separator">
<h3>Another Section Starts Here</h3>
</section>
<div class="content left illustration_04">
<h2>Simple Technique Using Pure CSS</h2>
<p> `What a curious feeling!' said Alice; `I must be shutting up like a telescope .'</p>
<p>And so it was indeed: she was now only ten inches high, and her face brightened up at the thoug
ht that she was now the right size for going though the litt      <p>After a while, finding that nothing more happened, she decided on going into the garden at once; but, alas for poor Alice! when she got to the door, she fo      <p>Soon her eye fell on a little glass box that was lying under the table: she opened it, and found in it a very small cake, on which the words `EAT ME' were b      <p>She ate a little bit, and said anxiously to herself, `Which way? Which way?', holding her hand on the top of her head to feel which way it was growing, and      <p>So she set to work, and very soon finished off the cake. </p>
</div>
<section class="separator">
<h1>THE END</h1>
</section>
并将此CSS添加到样式表中：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。