[摘要]
转眼间又是一年圣诞节，到处都是圣诞元素，咱们站长也给网站的logo带个圣诞帽子吧，一段css代码轻松搞定。
虽然笔者对过圣诞节不怎么感冒，但是现在的商家都把圣诞节作为一个营销节点，到处都充斥着圣诞元素，咱们做站的跟不上节奏怎么行？一起动动手给网站logo带上圣诞帽，今天分享的方法是利用纯css代码，不动前端布局，这样对新手朋友来说非常的友好。
通常来说，装饰logo要么修改logo图片，要么就动html结构，在logo后面加个绝对定位的图片，但是今天咱们不动图片，不动html，只修改css文件，直接贴出demo代码，点下面的按钮可以直接预览效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>给logo带上圣诞帽子</title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
.header{width:100%;height:65px;background:#33363b;}
.header .nav{width:1080px;margin:0 auto;position:relative;}
.logo{display:block;width:205px;height:65px;}
.logo img{width:205px;height:65px;}
.logo:after{content:url(shengdanHat2.png);display:block;position:absolute;top:-3px;left:140px;/* 根据实际情况修改定位*/}
p {font-size: 50px;width: 1080px;margin: 0 auto;font-weight: bold;z-index: 999;}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<div class="logo">
<a href="https://www.yaxi.net">
<img src="360X114-2.png" alt="雅兮网">
</a>
</div>
</div>
</div>
<p>Demo By yaxi.net </p>
</body>
</html>
使用方法：
1、上传圣诞帽子图片素材
2、首先确定你的logo元素样式class或者id 名称，在其选择器名称后添加:after伪元素以及值（上述代码中），注意帽子图片路径
3、给logo父元素增加相对定位属性 position:relative，如已有则可以忽略。
每个模板的结构都不一样，所以大家需要根据自己的实际情况调整，关键点就是给logo选择器后面加after伪元素，并给logo父元素添加相对定位。
笔者分享两个圣诞帽子图片，大家有更好的可以自行替换并修改定位值。
由于伪元素在IE7及以下的浏览器中兼容性比较差，所以本例只适用于IE8以上的现代浏览器（其实现在还用IE6、IE7的用户，估计也欣赏不了什么漂亮的网页了吧，哈哈）
延伸：after伪元素
浏览器支持
所有主流浏览器都支持 :after 伪元素。
定义和用法
:after 伪元素在元素之后添加内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
本文最后更新于2017年3月29日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
粤公网安备 44040402000065号
一开始也有同样的想法，但是前端技术菜，所以放弃了，感谢大佬分享
@杨小杰博客： 你这么一提醒，倒是让我想起了该带圣诞帽咯，哈哈
技术高手啊，可以拿出去炫一下了