巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

CSS设置背景恍惚的完成体例

0
一佰互联网站扶植(www.taishanly.com) 宣布时辰:2020-04-21 17:21:45 阅读数: 112

在做一些页面的时辰,为了让页面更都雅,咱们常常须要设置一些背景图片,可是,当背景图片过分花梢的时辰,又会影响咱们的主体内容,以是咱们就须要用到 filter 属性来设置他的恍惚值。

html代码以下

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><div class="cover">  <h1>我是须要凸起显现的内容</div></body></html>

可是若是间接在背景图片上利用的话,

.cover{    width:600px;    height:300px;    position:relative;    text-align:center;    line-height:300px;    color:white;    background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat;    filter:blur(5px);    background-size:cover;}

能够会形成上面的这类环境。

咱们会发明背景和主体内容都变糊了。

处理体例:给背景图片增添一个伪元素,将背景图片和 filter 属性设置在伪元素上,详细代码以下

.cover{    width:600px;    height:300px;    position:relative;    text-align:center;    line-height:300px;    color:white;}.cover::before{        content:"";    position:absolute;    top:0;    left:0;    width:600px;    height:300px;    background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat;    filter:blur(5px);    z-index:-1;    background-size:cover;}

总结

以上所述是小编给大师先容的CSS设置背景恍惚的完成体例,希望对大师有所赞助,若是大师有任何疑难请给我留言,小编会实时答复大师的。在此也很是感激大师对网页设想网站的撑持!

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:css完成中间笔墨双方横线结果
下一篇: css完成“加号”结果的实例代码
[前往消息列表]

相干消息more

13
12月
告急!对于com及net域名提交实名制认证通

尊重的客户: 您好 为了增进中国互联收集的成长,保证中国互联收集域名体系宁静、靠得住地运转,... >>概况

01
05月
使PHP自界说函数前往多个值

PHP自界说函数只许可用return语句前往一个值,当return履行今后,全部函数的运转就会停止。偶然辰咱们请求函数前往多个值时,用ret... >>概况

07
04月
想进步口试经由进程率?这10个罕见题目的规范谜底

之前UI黑客颁发了一篇《口试了50多位UI设想师,我总结了这些求职技能!》的文章,在网上获得良多设想师的承认。文章罗列了我在口试的时辰常常问... >>概况

14
05月
【站长图卦】精英阶级送来的心灵鸡汤_巅云建站

图卦,很久没写了,现在圈的大事愈来愈少,大事愈来愈多,这是好事,大事让咱们更专一、专业。 开篇先来一首《忽然的自我》送给你,希望你能爱好。 ... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站