写在前面偶然看到，这里整理笔记博文涉及内容： 使用CSS实现图片的磨砂玻璃效果Demo相关属性的简单文档说明理解不足小伙伴帮忙指正「 傍晚时分，你坐在屋檐下，看着天慢慢地黑下去，心里寂寞而凄凉，感到自己的生命被剥夺了。当时我是个年轻人，但我害怕这样生活下去，衰老下去。在我看来，这是比死亡更可怕的事。--------王小波」这里的 磨砂玻璃效果主要使用 CSS …
opacity css
如果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加text shadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，一般我们干这个活儿是通过photoshop来做，其实CSS本身也可以实现类似的效果。如何做？咱们先从下面这个例子开始，有一张背景图片，上面有些文字：对应的显示效 …
背景图片固定大法（background-attachment）background-attachment 定义和用法background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值实现背景图片固定的实用代码<!DOCTYPE html><html><head><meta cha …
前言今天秋招面试，css部分遇到一个题，如标题，css隐藏元素的方法有哪些，当时说的其实不太完整，这里小小总结一下。CSS隐藏元素的方法1. 使用 display: none这种方法完全从文档流中移除元素，不占据任何空间，如图2. 使用 visibility: hidden;这种方法隐藏元素，但元素仍然占据它在文档流中的空间，如图.hidden-elemen …
什么是混合？根据维基百科：?数字图像编辑和计算机图形中的混合模式(或混合模式)用于确定两个图层如何相互混合。在大多数应用程序中，默认的混合模式只是通过用顶层的内容覆盖底层来隐藏底层。?在CSS中，有两个属性负责混合。mix-blend-mode用于混合DOM元素，background-blend-mode用于组合多个CSS背景。进入mix-Blend-Mod …
今天用纯 CSS 实现一个飞机窗外的世界，希望大家开心~新建一个 index.html ，将下面代码复制进去，保存，双击打开 index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta …
今天使用纯 CSS 实现一个可调节亮度的吊灯<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" ><meta name="viewport" content="width=device …
如果 CSS 是女孩子，肯定如上图那样吧 ~简介一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。初步前端与高级前端之间，最大的差距可能就是信息差造成的。超级猫从 2016 年加入 GitHub …
Hello~~各位小伙伴，今天我们广州蓝景实训部，继续和大家分享前端技术干货，CSS隐藏元素总结出7种隐藏元素的办法1.CSS display的值是none。(该元素是不会在页面上显示的)div{display: none;}2. type="hidden"的表单元素。(该元素是不会在页面上显示的)3. 宽度和高度都显式设置为0。(该元素会在 …
前言对于一个前端开发者而言，性能优化是一个老生常谈的问题了，然而优化的方面有很多，比如加载优化、图片优化、渲染优化、打包优化、 js优化、css优化等等。CSS优化对于浏览器性能的提升不是特别明显，也往往是最被容易忽略的一个优化方向，下面我们来仔细聊聊CSS有关的性能优化，希望对你们平时的工作和面试有所帮助。慎重选择高消耗的样式高消耗属性在绘制前需要浏览器进 …