给网站logo添加圣诞节元素

爱折腾的星云 231
OUIMS博客广告

一年一度的圣诞节即将来临,小杰也闲的发毛,今天给大家分享一篇有趣的教程《给网站logo添加圣诞节元素》

使用方法

1、准备好圣诞帽的素材(png透明背景)

2、确定自己的logo图片的div的id或者clss

3、给logo父元素增加相对定位position:relative,如已有则可以忽略。

每个模板的结构都不一样,所以大家需要根据自己的实际情况调整,关键点就是给logo选择器后面加after伪元素,并给logo父元素添加相对定位。

说明

给网站logo添加圣诞节元素-第1张图片-OUIMS博客

确定上图中的三点,加入以下css


.logo:after {
    content: url(https://www.yaxi.net/demo/logo_hat/shengdanHat2.png);
    display: block;    position: absolute;    top: 41px;    left: 467px;}

其中图片链接以及top高度,left值都需要自己按照自己的网站进行调整。


需要说明的一点是由于本教程不支持自适应模版,自适应的时候圣诞帽位置会浮动。

顺便附上几个圣诞帽图片

给网站logo添加圣诞节元素-第2张图片-OUIMS博客给网站logo添加圣诞节元素-第3张图片-OUIMS博客给网站logo添加圣诞节元素-第4张图片-OUIMS博客给网站logo添加圣诞节元素-第5张图片-OUIMS博客

标签: 精品教程 代码教程

OUIMS博客广告

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~