整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
砂玻璃效果已经在互联网上流行了很多年，Mac OS以其磨砂玻璃效果而闻名，Windows 10也通过其他一些灯光，深度，运动，材质，比例尺实现了磨砂玻璃的效果
在CSS中使用磨砂玻璃效果时，我们中的一些人知道该怎么做，而其他人仍会在百度搜索：
“ css光泽效果”
“ css毛玻璃”
“透明模糊背景css”
“毛玻璃效果photoshop”
“仅cs模糊背景”
“ css玻璃窗格”
“ css背景滤镜”
“ css模糊覆盖物”
“ css div后面的模糊背景”
今天，我将展示仅CSS的一种方法，教你可以使用该方法在CSS中进行磨砂玻璃效果。
为简单起见，我将向你展示如何在空的div上制作磨砂玻璃效果。因此，HTML中所需的只是一个空的div。
<div> </div>*{
margin: 0;
padding: 0;
}我们需要我们的背景占据页面的整个宽度和高度，并且我们不想重复我们的背景，我们也希望我们的背景是固定的。我们希望背景是固定的，因为我们不希望以后在继承背景时将整个背景显示在div中。
body{
background-image: url(http://bit.ly/2gPLxZ4); //add "" if you want
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}现在，我们将使用背景继承为div设置一些宽度和高度。我们还需要确定绝对位置，以确保叠加层不会占用网页的整个宽度和高度
div{
background: inherit;
width: 250px;
height: 350px;
position: absolute;
}现在，我们知道在固定了背景附件的情况下，我们只能看到div后面的div内部的背景图像区域，而这正是我们希望毛玻璃效果起作用的地方
我们需要content: “”确保之前的伪类能够正常工作。我们还从其父级继承了背景，并且我们使用绝对位置将其在其父元素DIV中对齐。我们正在使用盒子阴影添加白色透明叠加层，并且正在使用模糊来模糊该叠加层。
div:before{
content: “ ”;
background: inherit;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
filter: blur(10px);
}现在，我们需要修复div的未模糊边缘，为此，我们需要增加叠加层的尺寸，使其比其父尺寸稍高一些，然后将其上下位置设为负（-25）。我们还需要给它的父对象提供隐藏的溢出，以确保父DIV之外的任何覆盖都不会显示并被隐藏。
div{
background: inherit;
width: 250px;
height: 350px;
position: absolute;
overflow: hidden; //adding overflow hidden
}
div:before{
content: ‘’;
width: 300px;
height: 400px;
background: inherit;
position: absolute;
left: -25px; //giving minus -25px left position
right: 0;
top: -25px; //giving minus -25px top position
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
filter: blur(10px);
}到这里，我们就实现了CSS的磨砂玻璃效果
你还可以使用CSS属性“backdrop-filter: blur(20px)”来实现此效果，该属性在工作方面要容易得多，并且是更好的选择，但兼容性还不是很强。
ackground可以帮助前端er们丰富元素的背景，让网页更加绚烂，是一个使用频率很高的属性。首先，我们会先介绍background-color、background-image、background-repeat、background-attachment、background-position基础属性。
1 background-color : 为元素设置背景颜色，会填充元素的内容、内边距、边框。如果边框有透明部分，会透过这些透明部分显示出背景色
值：
color_name 如：red hex_number 如：#f00 rgb_number 如：rgb(0,0,0) transparent 默认，透明 inherit 继承父元素
添加以下截图右侧代码可看出来“如果边框有透明部分，会透过这些透明部分显示出背景色”
2 background-image ：为元素设置背景图片（默认以内边距为起点）
值：
url 图片路径 none 不显示背景图片 inherit 父元素继承
添加以下截图右侧代码可看出来“默认以内边距为起点”
3 background-repeat：是否及如何重复背景图片（位置根据background-position设置）
值：
repeat 默认。背景图像将在垂直方向和水平方向重复 repeat-x 背景图像将在水平方向重复 repeat-y 背景图像将在垂直方向重复 no-repeat 背景图像不重复 inherit 继承父元素
若给元素添加透明的border，可看出来“图片的重复会在border上起作用”
4 background-attachment 设置背景图片是否固定或者跟随页面滚动（这里一般用于body或者html上）
值：
scroll 跟随页面滚动 fixed 固定 inherit 继承父元素
5 background-position ：设置背景图片的起始位置
值：
top/left/center/right/bottom x% y% （相对于父元素的位置） xpos ypos
若给元素添加background-position：100% 100%，可以看到背景图片已经被定为在元素的右下角。
tips:background-position一般最多运用在雪碧图当中来移动背景图片的位置。
如果我们将该图片看成是一张雪碧图，想只展示从嘴巴往右及往下的部分则可以利用background-position将图片往左移动，将嘴巴部分移动到原点展示
像以上所有的属性，其实可以加些成以下形式：background:color image repeat fixed postion
在css3，背景相关的属性在原有的基础上，新增了background-size、background-origin 、background-clip 。下面一一讲解一下~
6 background-size ：规定背景图像的尺寸
值：
length 第一个值是宽度，第二值是高度；如果只设置一个值，第二个值默认是auto percentage 以父元素的百分比来设置宽度和高度；如果只设置一个值，第二个值默认是auto cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
6.1 将元素的background-size设置成cover，图片（100*133）长>宽，会把图片的最小边去扩大至适应到元素对应的边，将整个图片平铺在元素上，尽量让元素内填充图片。
tips:可以看出来背景是相对于padding-box为起始位置绘制，不过，右侧和下侧的透明border还会被绘制
6.2 将元素的background-size设置成contain，图片（100*133）长>宽，会把图片的最长边去扩大至适应到元素对应的边，将图片全部展示在元素上。
6.3 不设置background-size，图片（225*300）长>宽，会按照图片原始尺寸展示在元素内。
6.4 不设置background-size，图片原尺寸为：225*300，会按照设置的size展示在元素上。
tips:1.这里用的比较多的是在移动端的背景图片，我们的设计师一般设计的移动端设计稿为三倍图。我们在运用到页面上时，一般会在原来的尺寸基础上缩小三倍。 2.这里建议x方向设置为具体值，y方向设置为auto。一方面，y向的尺寸会自动计算自适应；二方面，以后雪碧图有修改，可以直接在y方向上增加，不用再修改代码。不至于因为修改了图片没有修改代码带来bug。
7 background-origin 规定了background-position属性相对于什么位置来定位
值：
padding-box 相对于内边距来定位(默认) border-box 相对于边框盒来定位 content-box 相对于内容框来定位
给元素添加background-origin:content-box 可以看出来，背景图片是相对于内容框开始绘制
不同属性设置对比
望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《在CSS中使用background属性，调整页面和块背景，系统讲解背景属性》
本文承接上一篇文章中所讲到的background属性，通过几个简单实用的小例子，学些背景效果的各种实现方式。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
所承接的上一篇文章中，主要介绍了下列背景属性：
background-color
background-image
background-repeat
background-position
background-attachment
本文在上一篇文章的基础上，复习和巩固这五个属性的具体用法。
首先制作一张水印效果的图片。该图片的内容透明度较低，图片较小。本例中制作了一个宽度为290像素，高度为205像素的图片。该图片的文件名为back01.jpg。图片内容为两行文本，颜色为黑色，同时调整了两行文本的不透明度。图片效果如下所示，大家也可以根据自己喜好利用Photoshop随意制作。
例1素材图片 back01.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{background-image:url("back01.jpg");}
</style>
由于图片本身的尺寸远远小于整个页面的大小，所以在默认情况下，该图片会在页面中平铺以产生下列背景效果。
例1最终效果图
首先制作一张花边图片。该图片包含一个花边图样，图片较小。本例中制作了一个宽度为172像素，高度为36像素的图片。该图片的文件名为back02.jpg。图片效果为：
例2 素材图 back02.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{
background-image:url("back02.jpg");
background-repeat:repeat-x;
}
</style>
由于图片本身的尺寸远远小于整个页面的大小，同时又设置为水平方向平铺，所以该图片会在页面中产生下列背景效果。
例2最终效果图
首先制作一张渐变图片。该图片包含自上而下的蓝白渐变。本例中制作了一个宽度为1像素，高度为200像素的图片。该图片的文件名为back03.jpg。图片效果为：
例3 素材图片 back03.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
}
</style>
由于图片的宽度远远小于整个页面的宽度，同时又设置了水平方向平铺，所以该图片该图片会在页面中产生下列背景效果。
同时，由于页面本身的颜色默认为白色，因此，该渐变色下方的白色与页面背景颜色融合。因此，当页面过长产生垂直滚动条后，不会影响背景颜色的自然过渡。
那么，若需要给页面背景添加自上而下的白蓝渐变，应该如何设置呢？渐变色下方的蓝色与页面背景无法融合，会产生明显的蓝白边界。该问题的解决方法是将页面的背景颜色由默认的白色调整为渐变色下方的颜色即可。代码如下：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
background-color:# 8181fc; //渐变色下方的蓝色
}
</style>
首先制作一张可以居中放置的图片。本例中制作了一个宽度为500像素，高度为500像素的图片。该图片的文件名为back04.jpg。图片效果为：
例4 素材图片 back04.jpg
实现该效果的代码如下所示。
<style type="text/css">
body{
background-image:url("back04.jpg"); //加载图片
background-repeat:no-repeat; //设置不平铺
background-position:center center; //位置在页面中心
background-attachment:fixed; //页面滚动时图片固定
}
</style>
下一篇文章中，小海老师会带领大家学习CSS中功能强大的图片精灵技术（CSS Sprite）。对于渴望在前端开发道路上前进的你一定不能错过！
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
*请认真填写需求信息，我们会在24小时内与您取得联系。
