爱站屋博客 - 好东西不私藏,大家一起分享!关于博客 留言板

网站首页 技术教程 正文

给网站logo添加圣诞节元素

星云 2018-12-15 技术教程 150 ℃

一年一度[db:标签]圣诞节即将来临,星云闲的发毛,今天给大家分享一篇有趣的教程《给网站logo添加圣诞节元素》

使用方法

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

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

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

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

说明

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

确定上图中的三点,加入以下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张图片-爱站屋博客给网站logo添加圣诞节元素-第3张图片-爱站屋博客给网站logo添加圣诞节元素-第4张图片-爱站屋博客给网站logo添加圣诞节元素-第5张图片-爱站屋博客


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

:如果评论未出现,请刷新网页,谢谢合作!

会员中心
搜索
ip签名图
    IP签名图
网站分类
标签列表
文章归档
站点信息
  • 文章总数:80720
  • 页面总数:3
  • 分类总数:12
  • 标签总数:629
  • 评论总数:1899
  • 浏览总数:968187
爱站云安全认证