如何巧妙运用网页背景图片艺术并设置透明度以达到最佳视觉效果？
- 内容介绍
- 文章标签
- 相关推荐
有没有过打开一个网页,眼睛一下子就被背景戳中,或者反过来,本来好好的内容被背景晃得睁不开眼?哈哈我之前就踩过大坑——给个人博客放了张超高清雪山大图,后来啊读者留言说"找文章标题比找 lost 的钥匙还难",简直社死现场...今天就来唠唠,怎么把网页背景图玩出高级感,还能让透明度设得恰到好处,再也不犯尴尬症!，尊嘟假嘟？
先说说选图这件事吧,别以为"随便找张好看的就行"!不同网站性格不一样, background 当然得匹配气质才行啊喂。比如你做美食公众号,放一张烤焦边缘的玛格丽特披萨特写,比堆一堆网红滤镜风景照管用一百倍——用户看着就饿,哪还顾得上吐槽?要是科技类官网呢?搞张赛博朋克风格的霓虹灯管几何图?不对不对,太炸了反而显low,不如选低饱和度的电路板纹理或者渐变蓝紫色块,瞬间透露"我们很专业"の气质!害我以前总觉得"越花哨越吸睛",直到给美妆店做活动页用了烟花爆炸动图——后来啊客服哭着说"用户都在问烟花哪里买链接",压根没人注意主打口红...记住啊朋友们,background 是"陪衬",不是"主角",它该悄悄的把氛围烘到点上就行，我明白了。。
那重头戏来了:怎么设透明度才不让文字"消失"?我当初刚学 CSS 的时候可蠢了,直接给 div 加 opacity:0.5 ——后来啊文字也跟着朦朦胧胧跟水印似的!后来被同行笑到哭才知道:opacity 是搞整体透明の,想只让 background 变半透? 绝绝子... 得耍点小心机!比如说...给装 background 的盒子套个"隐形外套"?对没错!就是用 CSS 的伪元素 ::before !比如说这个骚操作:假设你有个 class 叫 "hero-box" 的大盒子要放 background 和文字,代码可以这么写:
.hero-box { position: relative; /* 父级定位很重要! / z-index: 1; / 让文字飘在上面 / } .hero-box::before { content: ""; / 伪元素必须有的空内容 / position: absolute; top: 0; le 开搞。 ft: 0; width: 100%; height: 100%; background: url center/cover no-repeat; / 居中且覆盖 / opacity: 0.6; / 看!只调 background 的透明度 / z-index: -1; / 把外套压到盒子下面 */ }
改进一下。 这样一来?background 乖乖变半透,里面の文字依然清晰到能戳瞎人眼!是不是超机智?哦对了还有种办法更简单——直接在 background 属性里叠一层颜色!比如 background: rgba url ——前面那个 rgba 就是白色半透层,RGBA 的再说说一位就是透明度,想深想浅自己调!不过这个办法适合background比较淡的时候哦~
说到图片格式,可别傻乎乎只用 JPG !想要天生带透明通道の background ?找设计师要 PNG !或者自己用 PS/Sketch 抠一下!SVG就更牛掰了——矢量图形放大缩小都不变形,放在手机屏还是电脑屏都清清爽爽,Sina博客那种小图标就是 SVG做の对吧?害我之前试过硬把 JPG 改成透明底...用在线工具转完之后画质渣到亲妈不认,png8 的颜色少得可怜像座机画面...奉劝各位一句:"专业の事交给专业格式!"
哦对了突然想到个好多人问の问题:"为什么百度不收录我的网页?"害...原因多到能写本书!但跟background绝对有关系!比如说你放の图片太大太胖——一张20Mの高清风景图塞进去,用户3G网加载半天直接关页走人 spider爬过来一看"这页面这么卡?算了算了不治也罢";再比如说你用の是 flash 动画当background...spider根本识别不了里面の内容自然不会收录!所以啊background优化也是SEOの一部分哦~后面会细说怎么压图片大小别急~
对吧？ 再聊聊色彩搭配吧,this is magic part !backgroundの颜色和整体色调搭不好?分分钟毁掉整个页面!比如咖啡网店用暖棕调background+米白文字= "哇这家店好有烟火气";要是换成亮粉底色+荧光绿字...对不起我会以为进了精神疗养院谢谢。还有一种小心机:"互补色撞色但降低饱和度"!比如蓝色和橙色是互补色,but把蓝娱乐ackground调成深蓝,橙色文字换成浅橙—既有对比又不会刺眼!,实话告诉你们我以前试过红配绿...用户留言说"看久了头疼想砸电脑",连夜改回黑白配才逃过一劫...
从头再来。 动态background要不要搞?当然要但别过火!现在流行の滚动渐变呀鼠标 hover动效呀都是加分项—but remember : "过犹不及!"我见过一个摄影工作室官网首页放了之字形瀑布流动画当background—用户刚点进去就卡成PPT吐槽"这是来看照片还是来看 loading ?",老板差点扣光设计师工资...所以动态可以有,but要 "轻量级":比如登录页放一片轻轻飘动の羽毛GIF,或者产品详情页滚动时background缓缓从浅蓝变深蓝—这种若有若无の变化才叫高级感懂吗?
何必呢？ 手机端适配必须提一嘴!现在人手一部智能机,who还会傻傻盯着电脑看网页啊?之前我做某奶茶品牌公众号H5时没考虑适配—后来啊iPhone X上background-size设成cover直接把奶茶杯截成两半...,后来查资料才知道正确姿势是:"background-size: cover;background-position:center;"再加个media query适配不同屏幕宽度!...不然安卓机和苹果机显示效果天差地别,you know ?
再说说说说加载速度优化—这个真の关乎生死!怎么压图片大小?教你们个懒人办法:PS里存PNG时选 "导出为Web所用格式",质量拉到8-9就行了画质几乎没变体积小一半;在线工具也挺好用....要是实在不会就牢记:"能用小尺寸绝不放大尺寸能用JPG绝不瞎用PNG"!毕竟用户等不及加载完就关页了你再好看의 background也没用啊~
拭目以待。 一下吧朋友们;background艺术运用核心就是:"让内容成为焦点".选对图搭好色设好透明度再搞定适配和加载—这不就完美啦?!下次再做网页试试把这些技巧用上保准朋友看了你作品都说"哇塞这谁做의好高级!"....哦对差点忘了刚才那个问题—为什么百度不收录?除了之 background加载慢还有可能title重复呀描述写得太垃圾呀robots.txt屏蔽错目录呀blablabla不过今天先聊到这儿;background这点事儿搞定了你已经赢过90%新手设计师啦~冲鸭!!!
有没有过打开一个网页,眼睛一下子就被背景戳中,或者反过来,本来好好的内容被背景晃得睁不开眼?哈哈我之前就踩过大坑——给个人博客放了张超高清雪山大图,后来啊读者留言说"找文章标题比找 lost 的钥匙还难",简直社死现场...今天就来唠唠,怎么把网页背景图玩出高级感,还能让透明度设得恰到好处,再也不犯尴尬症!，尊嘟假嘟？
先说说选图这件事吧,别以为"随便找张好看的就行"!不同网站性格不一样, background 当然得匹配气质才行啊喂。比如你做美食公众号,放一张烤焦边缘的玛格丽特披萨特写,比堆一堆网红滤镜风景照管用一百倍——用户看着就饿,哪还顾得上吐槽?要是科技类官网呢?搞张赛博朋克风格的霓虹灯管几何图?不对不对,太炸了反而显low,不如选低饱和度的电路板纹理或者渐变蓝紫色块,瞬间透露"我们很专业"の气质!害我以前总觉得"越花哨越吸睛",直到给美妆店做活动页用了烟花爆炸动图——后来啊客服哭着说"用户都在问烟花哪里买链接",压根没人注意主打口红...记住啊朋友们,background 是"陪衬",不是"主角",它该悄悄的把氛围烘到点上就行，我明白了。。
那重头戏来了:怎么设透明度才不让文字"消失"?我当初刚学 CSS 的时候可蠢了,直接给 div 加 opacity:0.5 ——后来啊文字也跟着朦朦胧胧跟水印似的!后来被同行笑到哭才知道:opacity 是搞整体透明の,想只让 background 变半透? 绝绝子... 得耍点小心机!比如说...给装 background 的盒子套个"隐形外套"?对没错!就是用 CSS 的伪元素 ::before !比如说这个骚操作:假设你有个 class 叫 "hero-box" 的大盒子要放 background 和文字,代码可以这么写:
.hero-box { position: relative; /* 父级定位很重要! / z-index: 1; / 让文字飘在上面 / } .hero-box::before { content: ""; / 伪元素必须有的空内容 / position: absolute; top: 0; le 开搞。 ft: 0; width: 100%; height: 100%; background: url center/cover no-repeat; / 居中且覆盖 / opacity: 0.6; / 看!只调 background 的透明度 / z-index: -1; / 把外套压到盒子下面 */ }
改进一下。 这样一来?background 乖乖变半透,里面の文字依然清晰到能戳瞎人眼!是不是超机智?哦对了还有种办法更简单——直接在 background 属性里叠一层颜色!比如 background: rgba url ——前面那个 rgba 就是白色半透层,RGBA 的再说说一位就是透明度,想深想浅自己调!不过这个办法适合background比较淡的时候哦~
说到图片格式,可别傻乎乎只用 JPG !想要天生带透明通道の background ?找设计师要 PNG !或者自己用 PS/Sketch 抠一下!SVG就更牛掰了——矢量图形放大缩小都不变形,放在手机屏还是电脑屏都清清爽爽,Sina博客那种小图标就是 SVG做の对吧?害我之前试过硬把 JPG 改成透明底...用在线工具转完之后画质渣到亲妈不认,png8 的颜色少得可怜像座机画面...奉劝各位一句:"专业の事交给专业格式!"
哦对了突然想到个好多人问の问题:"为什么百度不收录我的网页?"害...原因多到能写本书!但跟background绝对有关系!比如说你放の图片太大太胖——一张20Mの高清风景图塞进去,用户3G网加载半天直接关页走人 spider爬过来一看"这页面这么卡?算了算了不治也罢";再比如说你用の是 flash 动画当background...spider根本识别不了里面の内容自然不会收录!所以啊background优化也是SEOの一部分哦~后面会细说怎么压图片大小别急~
对吧？ 再聊聊色彩搭配吧,this is magic part !backgroundの颜色和整体色调搭不好?分分钟毁掉整个页面!比如咖啡网店用暖棕调background+米白文字= "哇这家店好有烟火气";要是换成亮粉底色+荧光绿字...对不起我会以为进了精神疗养院谢谢。还有一种小心机:"互补色撞色但降低饱和度"!比如蓝色和橙色是互补色,but把蓝娱乐ackground调成深蓝,橙色文字换成浅橙—既有对比又不会刺眼!,实话告诉你们我以前试过红配绿...用户留言说"看久了头疼想砸电脑",连夜改回黑白配才逃过一劫...
从头再来。 动态background要不要搞?当然要但别过火!现在流行の滚动渐变呀鼠标 hover动效呀都是加分项—but remember : "过犹不及!"我见过一个摄影工作室官网首页放了之字形瀑布流动画当background—用户刚点进去就卡成PPT吐槽"这是来看照片还是来看 loading ?",老板差点扣光设计师工资...所以动态可以有,but要 "轻量级":比如登录页放一片轻轻飘动の羽毛GIF,或者产品详情页滚动时background缓缓从浅蓝变深蓝—这种若有若无の变化才叫高级感懂吗?
何必呢？ 手机端适配必须提一嘴!现在人手一部智能机,who还会傻傻盯着电脑看网页啊?之前我做某奶茶品牌公众号H5时没考虑适配—后来啊iPhone X上background-size设成cover直接把奶茶杯截成两半...,后来查资料才知道正确姿势是:"background-size: cover;background-position:center;"再加个media query适配不同屏幕宽度!...不然安卓机和苹果机显示效果天差地别,you know ?
再说说说说加载速度优化—这个真の关乎生死!怎么压图片大小?教你们个懒人办法:PS里存PNG时选 "导出为Web所用格式",质量拉到8-9就行了画质几乎没变体积小一半;在线工具也挺好用....要是实在不会就牢记:"能用小尺寸绝不放大尺寸能用JPG绝不瞎用PNG"!毕竟用户等不及加载完就关页了你再好看의 background也没用啊~
拭目以待。 一下吧朋友们;background艺术运用核心就是:"让内容成为焦点".选对图搭好色设好透明度再搞定适配和加载—这不就完美啦?!下次再做网页试试把这些技巧用上保准朋友看了你作品都说"哇塞这谁做의好高级!"....哦对差点忘了刚才那个问题—为什么百度不收录?除了之 background加载慢还有可能title重复呀描述写得太垃圾呀robots.txt屏蔽错目录呀blablabla不过今天先聊到这儿;background这点事儿搞定了你已经赢过90%新手设计师啦~冲鸭!!!