大家好，今天来为大家解答接上一篇：前端必看的8个HTML+CSS技巧（第二部分）这个问题的一些问题点，包括也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

这种超酷的效果在官网上很受欢迎。这种效果可以给用户带来视觉冲击力，也给我们的网站带来活力。普通网页图像会随着网页滑动，但视觉差异效果图像会固定在底部，只有图像所在窗口上的元素会移动。

仅使用CSS

你没看错，只用CSS 就可以轻松实现这种效果！我们只需要使用CSS背景图像属性background-attachment:fixed，它将相对于视口固定背景。即使元素具有滚动机制，背景也不会随着元素的内容而滚动。

实现原理：

1、在包含图片的元素上添加background: url()和background-size: cover（第二个属性适合将图片定义为封面，这样可以让图片大小自动适应，完整的图片会显示在a上）大屏幕）

2.然后附加固定背景图片的属性background-attachment:fixed。

3. 最后，向该元素添加height: 100% 的高度或height: 400px 的任意高度。

就这么简单！不用怀疑，代码马上上传，大家可以自己尝试一下！

超文本标记语言

div class=’wrapper’ div class=’parallax-img’/img p 这里就填一堆文字即可，尽量多/p/divCSS

.wrapper { height: 100wh;}.parallax-img { 背景附件： 固定；背景位置：中心；背景-repeat: 无重复；背景尺寸： 封面；高度： 100%; background-image: url(‘http://ppe.oss-cn- shenzhen.aliyuncs.com/collections/182/7/thumb.jpg’);}p { font-size: 20px;填充： 1.5rem 3rem；最小高度： 1000px； //当你的文字内容不够时，你也可以提供足够的高度来看到效果。当然，如果字数足够的话就不需要}知识总结

background-attachment: 已修复— 修复了相对于视口的背景。即使元素具有滚动机制，背景也不会随着元素的内容而滚动。 background-size: cover — 允许图像尺寸自动适应并显示完整图像，即使在大屏幕上也是如此。

使用CSS + JavaScript

有些孩子可能不会对此感到震惊，或者仍然觉得不够刺激。我们再举一个高级的例子。上面的例子中，滑动时图片是固定的。如果加上JavaScript的帮助，我们可以让窗口中的图片随着页面慢慢滑动，使效果更加动态、更有冲击力。

实施理论

我们先来说说布局，因为我们滑动页面的时候需要使用JavaScript来对图片进行偏移，所以我们需要给图片赋予一个CSS属性，这样我们就可以让图片按照一个速度上下移动。在此示例中，我们将所有图像包装在带有类名块的div 中。该div被赋予相对定位属性position:relative。这时候我们可以在里面添加图片，然后让图片绝对定位在div框内的position:绝对位置。

但图片可能会很大。我们需要将图片保持在我们定义的框内，因此我们的div也被赋予overflow:隐藏，高度height: 100%。这样，图像超出div框就会被隐藏。

布局代码如下：

div class=’block’ img src=’https://unsplash.it/1920/1920/?image=1005′ data-speed=’-1′ class=’img-parallax’/h2 视差速度-1/h2/divdiv class=’block’ img src=’https://unsplash.it/1920/1920/?image=1067′ data-speed=’1′ class=’img-parallax’/h2 视差速度1/h2/divhtml, body{ margin: 0;填充： 0；高度： 100%;宽度： 100%； font-family: ‘Amatic SC’，草书；}.block{ width: 100%;高度： 100%;相对位置：溢出：隐藏；字体大小： 16px;}.block h2{ 相对位置：显示：块；文本对齐：居中；边距： 0;顶部： 50%；变换：翻译Y(-50%);字体大小： 10vw；颜色：白色； font-weight: 400;}.img-parallax { width: 100vmax; z-index: – 1;绝对位置：顶部： 0;剩余： 50%； Transform: 翻译(-50%,0); pointer-events: none} 实现这种布局，滑动时图片不会移动。因为最后一步是添加JavaScript 辅助，使图像变得生动起来。

script src=’https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js’ /scriptscript//循环获取每个图像元素$(‘.img-parallax’).each(function () { var img=$(this); var imgParent=$(this).parent(); function parallaxImg() { var speed=img.data(‘speed’); //获取每个图片的偏移速度var imgY=imgParent. offset().top; //获取图片框的Y位置var winY=$(this).scrollTop(); //获取当前滑动位置var winH=$(this).height();浏览器窗口的高度varparentH=imgParent.innerHeight(); //获取图片框的内部高度//浏览器窗口底部的位置var winBottom=winY + winH; //当前图片是否进入浏览器窗口if ( winBottom imgY winY imgY + ParentH) { //计算图片需要开始移动的位置var imgBottom=(winBottom – imgY) * speed; //计算图片需要停止移动的位置var imgTop=winH + ParentH; //获取起始点移动到结束移动的%（基于起始和结束像素+移动速度） var imgPercent=(imgBottom/imgTop) * 100 + (50 – speed * 50); } img.css({ top: imgPercent + ‘%’, transform: ‘ 翻译(-50%, -‘ + imgPercent + ‘%)’, }); } $(document).on({scroll: function () { parallaxImg(); },ready: function () { parallaxImg(); }, });});/脚本知识总结

position:relative — 相对定位。 position: Absolute — 绝对定位。 Overflow: 隐藏— 如有必要，内容将被剪裁以适合填充框。没有提供滚动条。

6. 裁剪图像的动画

在CSS3 之前，裁剪图像也相当困难。现在我们有两个非常方便简单的CSS3属性来实现裁剪，即object-fit和object-position。这两个属性允许我们改变图像的大小而不影响图像的长宽比。

当然，我们可以使用图像处理工具或者JavaScript等插件来实现图像裁剪功能。但由于CSS3的属性，我们不仅可以裁剪，还可以使用裁剪属性在图像上创建动态效果。

为了让我们的例子更简单，我们这里使用了input type=’checkbox’ checkbox 元素，这样我们就可以使用：checked 伪类来触发启动效果。所以在这个例子中我们根本不需要JavaScript 的帮助。

实现原理：

1、首先给图片设置宽高为： 1080px，宽度为： 1920px。

2.然后使用CSS选择器来锁定输入被选中时img标签的样式变化。选择后，为图像指定新的宽度和高度。这里我们给宽度和高度各500像素：width: 500px，height: 500px。

3、然后我们添加了过渡效果和时间，让图片改变宽高时有动画过渡效果：transition: width 2s, height 4s;

4.最后，添加两个属性object-fit: cover和object-position: left-top来保持图像的长宽比，就完成了！

我们看一下完成后的代码：

检查裁剪后的图片input type=’checkbox’/br/img src=’https://img-blog.csdnimg.cn/2020032122230564.png’ alt=’Random’/input { transform: scale(1.5); } /* 只是用来放大复杂图像跑马灯大小*/margin: 10px 5px; color: #fff;}img { width: 1920px;高度： 1080px； transition: 0s;}/* css选择器锁定复选框被选中时的状态*/input:checked + br + img { width: 500px ;高度： 500px； object-fit: 盖；对象位置：左上； transition: width 2s, height 4s;} 知识总结

object-fit — CSS 属性，指定可替换元素的内容应如何适合由其使用的高度和宽度确定的框。

object-position — 用于切换元素框中被替换元素的内容对象的对齐方式。

过渡——当元素在不同状态之间切换时，过渡可以定义不同的过渡效果。

7. 混合模式（Blend）

如果您使用过Photoshop，您应该对混合模式非常熟悉。我们都知道混合模式非常强大，也是制作照片时非常常用的功能。但你有没有想过，你可以直接在浏览器的CSS中使用它？我们不需要设计师给我们画图，我们的前端也可以实现混合模式。

在CSS中，我们不仅可以给背景添加混合模式，还可以给任何元素的内置背景添加混合模式，让你创造出很多以前从未想过的效果和布局。

要为元素添加混合模式，我们只需要使用CSS 属性mix-blend-mode 即可。

简单实现原理：

首先我们只需要添加一个h1标题标签

h1混合模式：color dodge/h1 然后我们在h1标签中添加mix-blend-mode中的颜色减淡模式color-dodge，但是需要注意的是我们需要在body和html中添加背景色background:白色，否则你会发现这个效果无效。因为我们没有给h1赋予颜色，它会自动向上层继承，而混合模式是为了过滤背景色，所以body和html都需要有背景色。

h1 { mix-blend-mode: 颜色减淡；字体-family: 雅黑；字体大小： 5rem；文本对齐：居中；边距： 0;内边距： 20vh 200px； color: #D1956C;} html, body { margin: 0;背景颜色： }body{ 背景-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1ixid=eyJhcHBfaWQiOjEyMDd9auto=formatfit=cropw=3302q=80);背景-repeat: 无重复；背景尺寸： 封面；最小高度： 100vh；溢出：隐藏； }您可以通过更改背景图像和h1标签的字体颜色来创建各种特殊效果。

知识总结

mix-blend-mode — CSS 属性，描述元素的内容应如何与元素的直接父元素和元素的背景混合。

8. 瀑布流布局

CSS Grid 和Flexbox 让我们更简单、更容易、更快捷地实现各种响应式布局，并且可以让我们快速、方便地在布局中实现水平和垂直布局。但回想过去是相当困难的。

虽然这些新的布局方法可以让我们解决很多以前的布局问题，但是像瀑布流布局这样的东西却不能轻易用它们实现。因为瀑布流一般宽度都是一样的，但是高度是根据图片自适应的。而且图片的位置也是以上图的位置为准。

事实上，实现瀑布流布局的最佳方式是使用CSS列属性套件。这组属性中的大部分用于布局杂志中的文本栏。但它对于布置瀑布流也特别实用。因为以前要实现瀑布流，需要JavaScript来计算图像高度，然后确定每个图像的位置和位置，所以现在有了列属性，就可以使用纯CSS来实现。

实现原理：

要实现这种布局，首先我们需要将所有内容包装在一个div 元素中，然后为该元素赋予column-width和column-gap属性。

然后，为了防止任何元素在两列之间拆分，请将column-break-inside: 避免添加到各个元素。

完美实现神奇效果，零JavaScript。

我们看一下代码：

div class=’columns’ 图img src=’https://source.unsplash.com/random?city’ alt=” //figure 图img src=’https://source.unsplash.com/random?night’ alt=” //figure图img src=’https://source.unsplash.com/random?developer’ alt=” //图图img src=’https://source.unsplash.com/random?building’ alt=” //图图img src=’https://source .unsplash.com/random?water’ alt=” //figure 图img src=’https://source.unsplash.com/random?coding’ alt=” //figure 图img src=’https://source.unsplash.com/random ?stars’ alt=” //figure 图img src=’https://source.unsplash.com/random?forest’ alt=” //figure 图img src=’https://source.unsplash.com/random?girls’ alt=’ ‘ //figure 图img src=’https://source.unsplash.com/random?working’ alt=” //figure/div.columns { column-width: 320px;列间隙： 15px；宽度： 90%；最大宽度： 1100px； margin: 50px auto;}.columns 图{ display: inline-block; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); column-break-inside: 避免； border-radius: 8px;}.列图img { width: 100%;高度： 自动；边距底部： 15px； border-radius: 8px;} 知识总结

column-width — 建议最佳列宽的CSS 属性。列宽是添加另一列之前一列的最大宽度。

column-width — 此CSS 属性设置元素列之间的间距的大小。

column-break-inside — 设置或检索对象内部是否损坏。

总结

希望这8个前端技巧和特效对大家有所帮助，帮助大家吸收一些新的前端知识。事实上，本文提到的很多内容都值得挖掘和学习。我举的一些例子比较简单，但其实可能性是无穷无尽的。喜欢前端的童鞋们，让我们一起在前端领域继续深挖，让我们的热爱无限燃烧！

最后想跟大家说一下我对前端的热爱和态度。

回顾前端这几年，发展确实很快。从前端排版、HTML5+CSS3制作H5页面，到前端组件化，各种UI框架无处不在。

一开始，我是跟随热潮开始使用UI框架的。一开始我觉得很方便。当我想出一个新项目时，我会直接使用UI框架，开发速度也很快。但久而久之，我感觉前端开发已经变成了处理数据、连接接口、实现交互。

有一天，在阅读一些国外的前端设计和框架时，我突然发现国内的前端开发人员大多数不再使用CSS3来创建一些有趣的布局和特效。现在市面上的系统和页面都是一样的。他们一般使用一些知名的UI框架来构建系统和APP，基本自己排版的人很少。前端不再像以前一样，缺乏灵魂。

但是回想一下我们刚开始学习前端的时候，给我们最大的成就感，觉得前端特别有趣。正是这种布局、特效和互动让我们感到神奇和难以置信。我们成功地实现了一个非常漂亮、很酷的页面和特效，这种感觉让我们在工作中越来越兴奋。

但在一些公司，研发部门要求快速发展，UI设计部门也受到时间控制和限制，因此逐渐陷入UI框架的束缚。系统和应用程序是围绕这些UI 框架设计和开发的。

作为一名热爱前端的开发者，我在大部分项目中仍然坚持自己排版和实现页面交互效果。然后使用UI框架作为辅助，主要是为了方便一些小组件和常用组件的快速实现。 （可以说我是一个追求完美和外表联想的程序员）

用户评论

终究会走-

这个系列文章不错啊！一直跟着看到了第二部分，讲的这些技巧确实很好用，之前在开发中遇到过类似问题，看了你的解答感觉豁然开朗了！

    有19位网友表示赞同！

虚伪了的真心

看完第一篇就觉得很棒了，第二篇更是把HTML和CSS的各种细节总结得特别清楚。学习编程最重要的就是在积累经验和解决实际问题时不断探索新的技术，感谢作者的分享！希望以后也继续更新更多类似的文章。

    有14位网友表示赞同！

留我一人

我也是前端开发的一员，最近一直在研究HTML和CSS新方法。这个文章里的技巧都是很有用的，很多都是我之前没了解过的，看了之后有很大的启发！

    有18位网友表示赞同！

尘埃落定

讲道理，一些基础的CSS知识真的可以用得更灵活，这篇总结不错就是个例子，以后开发中会尝试一下这些新的技巧。

    有7位网友表示赞同！

隔壁阿不都

说实话，这篇文章有些老了，现在已经有很多新兴的技术代替了这些传统的技巧。想要了解更多前端技术，最好关注最新的发展趋势和开源项目。

    有12位网友表示赞同！

青衫故人

第一篇的评论区太吵了！这个系列的文章虽然还不错，但也有很多地方比较浅显，建议作者可以结合一些实战案例进行更深入的讲解，这样更容易让人理解和吸收。

    有5位网友表示赞同！

开心的笨小孩

我发现这篇文章中有一些技巧并没有完全讲明白，比如FlexBox的一些使用方法，还是需要自己多练习才能掌握。希望后续文章能够更加详细地讲解这些核心技术。

    有5位网友表示赞同！

强辩

确实有些HTML+CSS的技巧已经过时了，这个文章只是简单地回顾了一些基础知识，对于有一定经验的前端工程师来说意义不太大。

    有16位网友表示赞同！

柠栀

我最近开发了一个项目就用了其中的一些技巧，效果很好！感谢作者分享这些实用性很强的技巧，能够帮到很多开发者。期待后续的文章继续解锁更多前端新知！

    有13位网友表示赞同！

?娘子汉

HTML+CSS是前端的基础，这篇文章总结的还不错，适合新手学习，但对于经验丰富的开发者来说只能算是入门级的内容了。

    有11位网友表示赞同！

执妄

这些技巧其实都是一些老配方，现在主流的前端开发框架已经解决了大部分问题。建议作者可以结合最新的技术趋势分享一些更实用的知识，比如React、Vue、Angular等。

    有13位网友表示赞同！

忘故

"前端必看"？我觉得这个词眼有点大了吧，这篇文章的技巧都很基础，不能说完全是“必看”的。不过对于新手来说还是很有帮助，能够学习到基本的HTML+CSS知识。

    有10位网友表示赞同！

志平

这篇博客写的不错啊！很能说明一些常见问题解决方法，比以前我学到的还详细！

    有11位网友表示赞同！

落花忆梦

我很喜欢作者的写作风格，解释很清晰易懂，特别是对新手开发者来说非常实用。希望后面还有更多这样的文章分享，可以帮助我们不断提升前端技能!

    有13位网友表示赞同！

棃海

有些技巧我已经熟练运用很久了，但也有部分新颖的方法是第一次见，学习到新的东西还是很开心的~

    有9位网友表示赞同！

昂贵的背影

我之前总是觉得HTML和CSS都很复杂，看完这篇文章之后感觉好像明悟了一些，对这两个技术有了更透彻的了解。

    有6位网友表示赞同！

羁绊你

这些技巧确实很有用，我在项目中直接应用了一下之后发现效果显著！真是收获满满!

    有6位网友表示赞同！

龙吟凤

学习前端开发的过程中遇到很多困惑，希望能有更多这样深入讲解HTML+CSS技巧的文章帮助我们解决实际问题，继续支持作者创作！

    有8位网友表示赞同！