当前位置:首页 > emlog博客 > 正文内容

Emlog pro博客添背景图片及背景透明教程[默认模版]

(一)添加背景图片

修改main.css文件,emlog的主题模板下,找到主题的“main.css”文件,打开它,找到body命令行(默认模板body在第一行),我们在body后加入代码使它变成这样

body {background-image:url("images/bj.jpg"); background-repeat:no-repeat; Background-attachment:fixed; color:none;


说明:body {background-image:url("images/bj.jpg"); //背景图片地址
           background-repeat:no-repeat; //决定图片的平铺模式

           Background-attachment:fixed; //设置背景图像是否固定或者随着页面的其余部分滚动

注意:源"background: #FFFFFF;"要替换掉,"body {" 不要重复!

 

平铺模式

描述 
repeat默认的,背景图像将在垂直方向和水平方向重复
repeat-x背景图像将在水平方向重复
repeat-y背景图像将在垂直方向重复
no-repeat 背景图像将仅显示一次
inherit 规定应该从父元素继承 background-repeat 属性的设置

 

滚动部分

描述 
scroll默认值,背景图像会随着页面其余部分的滚动而移动
fixed当页面的其余部分滚动时,背景图像不会移动
inherit规定应该从父元素继承 background-attachment 属性的设置

 

color:none;

描述 
none;

//为元素设置一种纯色

这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

 

(二)背景半透明处理

其中中间有一个白色的地方,把图片的大部分都遮盖住了,这样几乎等于没有加背景,那么要怎么办呢?

有的人会说,把这些部分的“background-color”属性全部设置成“none”不就行了吗?

确实,这是比较粗糙的做法,这样设置后可能会使背景图片的颜色极其影响文章的阅读。所以,我们要使这个白色区域半透明!

代码都是相同的,但是由于emlog的模板比较简单,所以这里用emlog来举例,大家可以自己修改wordpress的试试。

同样是“main.css”文件,我们可以找到“#wrap”这一行属性,代表的就是这个白色的区域。

这里要感谢cnf2e的代码,他的源码在此利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8

原理的确是使用rgba以及滤镜,但是他的源码添加上去之后,这个白色区域是变成黑色的半透明,个人觉得黑蒙蒙一片不好看,所以就改成白色半透明。

 

修改后的代码如下,加入在“#wrap”这一行就可以了。其实大家可以自己尝试修改成红色/绿色/蓝色半透明等各种颜色。

#wrap {background: rgba(255,255,255,0.6);background: transparent\9;zoom:1\8; /* required for the filters */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* IE8 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* IE5.5-7 */



background: rgba(255,255,255,0.6);   //这里就是设置rgb三种颜色以及透明度,一般透明度是0.6就足够了,rgb颜色大家可以自己调成自己喜欢的颜色

注意:源"background: #FFFFFF;"要替换掉,“#wrap {”不要重复!


扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/emlog/43.html

标签: emlog博客

相关文章

Emlog pro适配5.3.1默认模版缩略图功能加内容页美化

Emlog pro适配5.3.1默认模版缩略图功能加内容页美化

本文介绍emlog pro 版启用emlog5.3.1默认主题模版增加文章列表缩略图功能及相关美化安装 emlog pro打开emlog官网:https://www.emlog.net/ 下载emlog pro系统 源码上传emlog 5....

Emlog5.3.1版本博客兼容PHP7+环境的方法

Emlog5.3.1版本博客兼容PHP7+环境的方法

Emlog5.3.1虽然已经出了使用mysqli连接类,可是直接在php7安装emlog5.3.1各种报错。还好为了兼容性,还是默认使用了mysql。现在php7已经不支持mysql扩展了,但还是支持mysqli和pdo_mysql。所以这...

Emlog pro 用5.3.1默认模版添加悬浮侧边栏的笔记

Emlog pro 用5.3.1默认模版添加悬浮侧边栏的笔记

第一步:找到需要悬浮文件的代码位置,如侧边栏新建组件 代码框里,添加如下代码:<div id="float"> 你要悬浮的内容代码 </div>  &nb...

Emlog pro利用5.3.1默认模版在内容页面下添加版权代码

Emlog pro利用5.3.1默认模版在内容页面下添加版权代码

EMLOG 博客程序关于实现文章内容页底部添加加版权信息及代码EMLOG博客快速、简单的,我们可以给文章加版权各方面的信息。下面以emlog pro 版为例,模版为5.3.1默认模版修改适配pro版本,以下简称pro版精典531。添加方法:...

Emlog博客之列表分页title标题SEO相关优化

Emlog博客之列表分页title标题SEO相关优化

如何解决emlog列表分页title标题SEO优化Emlog程序默认的分页title都一模一样,造成很多同名页面,关键词冲突;以下是解决这个问题的方法。首先编写一个从第二页开始显示分页标题的函数,放在模版文件的module.php里面,代码...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。