给你的博客园增加背景，头像和top小火箭

Posted 2022-04-12 guomie

个人头像

在博客侧边公告栏处添加下列代码

 <img src="https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_gz.jpg" alt="果咩的头像" class="img_avatar" width="250px" style="border-radius:50%">
 

背景

在页面定制css代码处 添加下列代码

  body 
  color: #000;
  background: url(https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_lm.jpg
  ) fixed;
  background-size: 100%;
  background-repeat: no-repeat;
  font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
  font-size: 12px;
  min-height: 101%;
  
  #home 
  opacity: 0.80;
  margin: 0 auto;
  width: 85%;
  min-width: 950px;
  background-color: #fff;
  padding: 30px;
  margin-top: 30px;
  margin-bottom: 50px;
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  
 

返回top顶部小火箭

在页脚html代码添加下列代码

<style>
  #back-top 
       position: fixed;
       bottom: 10px;
       right: 5px;
       z-index: 99;
  
  #back-top span 
       width: 100px;
       height: 100px;
       display: block;
       background:url(https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_123.png) no-repeat center center;
       background-size: contain;
  
  #back-top aoutline:none
  </style>
  <script type="text/javascript">
  $(function() 
      // hide #back-top first
      $("#back-top").hide();
      // fade in #back-top
      $(window).scroll(function() 
          if ($(this).scrollTop() > 500) 
              $(‘#back-top‘).fadeIn();
           else 
              $(‘#back-top‘).fadeOut();
          
      );
      // scroll body to 0px on click
      $(‘#back-top a‘).click(function() 
          $(‘body,html‘).animate(
              scrollTop: 0
          , 800);
          return false;
      );
  );
  </script>
  <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>