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;
    }

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

  • 相关阅读:
    鸿合爱学班班.kl课件转ppt课件
    Mac下Android Studio添加忽略文件的方法
    Android中处理PPI
    Mac下配置全局gradlew命令
    Application启动图
    图像合成模式XferMode
    path绘制
    drawArc 画扇形 画弧线
    okhttp请求完整流程图
    责任链模式
  • 原文地址:https://www.cnblogs.com/Whiteying/p/10070621.html
Copyright © 2011-2022 走看看