杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

给网站logo添加圣诞节元素

Young小杰2018-12-14 11:53 网站搭建(7)3163小标签: 网站搭建教程 css3

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

使用方法

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

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

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

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

说明

TIM截图20181214120601.png

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


.logo:after {
    content: url(https://www.yaxi.net/demo/logo_hat/shengdanHat2.png);
    display: block;
    position: absolute;
    top: 41px;
    left: 467px;
}
其中图片链接以及top高度,left值都需要自己按照自己的网站进行调整。


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

顺便附上几个圣诞帽图片

圣诞帽圣诞帽圣诞帽圣诞帽

本文最后更新于2018-12-14,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

评论列表:

  • 腾讯视频 Lv 2

    ##私密评论仅博主可见##

  • 雅兮网 Lv 1

    如果logo 是自适应尺寸的  那么帽子的绝对定位可以考虑使用百分比,就解决了错位的问题;当然我更建议只在标准尺寸下展示帽子,小屏幕下就直接隐藏

    • Young小杰 站长

      回复了雅兮网:不错,我也是这么想的,但是每个屏幕的大小都不同,所以还是会有一点位置上的偏移

    • 雅兮网 Lv 1

      回复了Young小杰:那就直接把帽子做进logo吧,一劳永逸 哈哈

    • Young小杰 站长

      回复了雅兮网:也想到过,但是没意思了

  • yuerfei.cn Lv 2

    用方糖订阅了小杰的博客,经常来,但是很少留爪子,今天来留一个对方不想跟你说话并向你丢了一朵小黄花回复了(献花)

  • 手机扫描二维码
    阅读体验更佳