zoukankan      html  css  js  c++  java
  • 【技术】让你的博客更加绚丽

    不定时更新

    页面定制CSS代码将会让你的博客变得

    高大上逼格满满养眼

    下面是一些博主的博客CSS代码

    (页面定制CSS在“管理”—>“设置”中的“页面定制CSS代码”)

    1.背景

    关于背景的CSS代码在body块中

    先在代码框中加入以下代码:

    body{
    
    }

     之后我们就可以对博客背景进行修改了

    1.1更换背景图片

    在body块中加入

    background-image:url(XXX); 

    XXX就是图片的地址

    1.2背景图片重复

    如果在body块中加入

    background-repeat:repeat;

    就会发现全网页背景图片重复平铺

    但是我们想要高大上一点,就设置为不平埔

    background-repeat:no-repeat;

    1.3背景不滚动

    将背景固定

    background-attachment:fixed;

    就是背景不随页面滚动。

    1.4背景图像的尺寸

    有的时候图片由于自身属性或者浏览器问题,并不会完全显示在屏幕中

    这时候需要添加这段代码

    background-size:cover;

    就可以做到把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    2.主体内容容器

    关于主体内容容器的CSS代码在#home块中

    先在代码框中加入以下代码:

    #home {
    
    }

    之后我们就可以对主体内容容器进行修改了

    2.1主体透明

    主体挡住了我们的背景,这时就要设置透明度来让我们看到背景

    添加以下代码:

    opacity: 0.80;

    将透明度设置为0.80。


    最后的代码是这个样子:

    body {
        background-image:url(http://images.cnblogs.com/cnblogs_com/Whiteying/1356054/o_cc020ef3d7ca7bcb5a1bc12bbe096b63f624a85a.jpg); 
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-size:cover;
    }
    #home {
        opacity: 0.80;
    }

    这样就做成了博主这样的效果了

  • 相关阅读:
    ✨Synchronized底层实现---偏向锁
    🌞LCP 13. 寻宝
    ✨Synchronized底层实现---概述
    ⛅104. 二叉树的最大深度
    c++多线程之顺序调用类成员函数
    C++ STL实现总结
    C#小知识
    C#中HashTable和Dictionary的区别
    WPF的静态资源(StaticResource)和动态资源(DynamicResource)
    WPF之再谈MVVM
  • 原文地址:https://www.cnblogs.com/Whiteying/p/10070621.html
Copyright © 2011-2022 走看看