【技术】让你的博客更加绚丽

不定时更新

页面定制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;
}

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

原文地址:https://www.cnblogs.com/Whiteying/p/10070621.html