新浪博客怎样以图片为背景发表文章??

4个月前 (10-19 11:47)阅读10回复0
wly
wly
  • 管理员
  • 注册排名8
  • 经验值129760
  • 级别管理员
  • 主题25952
  • 回复0
楼主

  若何在文章里参加图片

翻开或颁发一篇文章,勾选“显示源代码”勾选框,必然要勾选!在文本框中插入如下代码。

代码:

代码申明:

  代码的第一行图片框的属性,borderColor、height、width和border几个属性值能够停止修改,他们别离代表边框颜色,边框的高度,边框的宽度和边框的粗细值,此中边框颜色属性必需为十六进造数,或者为red、yellow、blue等。

  在background后面填入索要插入的布景图片的链接。

  留意,边框的宽高值更好按照图片的大小来设置。

代码设置好后,勾销“显示源代码”框,起头在图片上写文字,写文字的办法和在文本框中写文字的办法不异。

自定义新浪博客遍地模板

一改动BLOG题目大小的代码:

  banner 。title td{font-size:36px;}

。banner 。title td{FILTER: glow(color=#000000,direction=2);}

。banner 。title td{color:#ffff66;}

  banner table{background:#transparent;filter:alpha(opacity=85);border:0px solid #000;}

36px为题目文字的字体大小

#000000暗示文字效果(显影)的颜,direction=2暗示发光效果的强弱,数值可自行设定,本身觉得适宜即可。

banner 。title td{color:#ffff66;}暗示题目文字的主颜色

banner table{background:#transparent; filter:alpha(opacity=85); border:0px solid #000;}那个是文字及其外框的设置:background:后面的值为题目外框的颜色效果;opacity=85是暗示文字的通明度,值越小越通明;border:0px暗示外框线条的粗细,数值越大边框线条越粗,数值设为0暗示边框隐藏。

二页面宽度的代码:

。bodyTop{width:900px;}

  bodyBg{width:900px;}

。bodyBottom{width:900px;}

。feeds 。text{width:660px;}

。label{width:20px;}

。photo{width:200px;}

  callboard{width:200px;}

。links{width:200px;}

。calendar{width:200px;}

。sysBr180{width:200px;}

参数申明:

。bodyTop 指的是页面顶部的宽度,控造了 banner(就是题图)的宽度。

。bodyBg 指的是整个页面的宽度,其值更好与上者不异(也能够自行变革)。

。bodyBottom 指的是页面底部的宽度,其值更好是与上面不异 。

。feeds 。text 指的是注释部门的宽度(也就是文章部门的宽度) 。

。label 指的是面板的宽度(其值加注释宽度的值应略小于整个页面的宽度)。

。photo 指的是形象照全面板的宽度(其值同上) 。

。callboard 指的是通知布告栏的宽度(其值同上) 。

。links 面板(也即最新留言、最新评论等面板)宽度(其值同上)。

。calendar 日历的宽度(其值同上)。

  sysBr180 那个值比力特殊,其值同以上各面板宽度近似,但纷歧定不异各人应当按照本身设置的宽度停止调理。

width 后面的数字就是你要修改的宽度值,可按照本身的需要设置。

面板的宽度值大约为190摆布;若是要改成全屏,整个页面总宽度约为995-996。

不外要更改模板宽度的话建议面板的宽度没必要改,只需用代码中的前四个参数就行了。

三博客改动布景代码:

滚动的大布景代码:

body {background:url("页面大布景图片地址") repeat scroll!important;}

repeat 反复,当图片的大小不敷的时候会以平铺显示

scroll 卷轴,大布景会跟着右边滚动条拉动的时候而滚动

固定的大布景代码

body {background:url("页面大布景图片地址") repeat fixed!important;}

fixed 固定,大布景不会因为你拉动滚动条而滚动

布景通明代码:

body

{background:#transparent) repeat scroll!important;}

利用申明:

找到你喜好的图片(1024*768规格),把它存在你的博客里,详细办法参考无限造上传图片的办法然后把图片地址笼盖在代码中的("页面大布景图片地址")上面,找一个已经有内容的模块添加那段代码,就能改动你的BLOG布景了,详细用以上那一种代码,看你小我爱好了!

四自定义博客各部门布景代码:

  logo

{background:url("题图上布景图片地址") no repeat no scroll!mportant;}

。banner

{background:url("题图下布景图片地址") no repeat no scroll!mportant;}

  menu

{background:url("题图下的菜单布景图片地址") no-repeat center;}

。feeds 。up

{background:url("注释题目栏上翻时的图片地址") no-repeat center;}

   wn{background:url("注释题目栏下翻时的图片地址") no-repeat center;}

。feeds 。function

{background:url("注释摘要结尾处菜单的图片地址") no-repeat right;}

  links 。up

{background:url("面板题目栏上翻时的图片地址");}

。 wn{background:url("面板题目栏下翻时的图片地址");}

。links 。mid

{background:url("面板的布景图片地址");}

  photo 。mid

{background:url(小我形象照片处的布景图片地址);}

。label 。mid

{background:url("自定义面板的布景图片地址");}

。calendar 。mid

{background:url("日历面板布景图片地址");}

  callboard 。up

{background:url("通知布告栏题目栏上翻时的图片地址");}

。 wn{background:url("通知布告栏题目栏下翻时的图片地址");}

。callboard 。mid

{background:url("通知布告栏布景图片地址");}

  bodyBg

{background:url("注释布景图片地址");}

。bodyBottom

{background:url("内布景页脚处图片地址,在翻页处下面一横窄条");}

。gbook 。up

{background:url("留言板题目栏上翻时的图片地址") no-repeat;}

   wn{background:url("留言板题目栏下翻时的图片地址") no-repeat;}

。 ge{background:url("注释文章页数图片地址") no-repeat center;}

。 re{background:url("最新文章列表下的MORE的布景图片") no-repeat right;}

代码申明:

页面大布景(body) 指的是整个博客的更大布景,因为中间部门被笼盖,所以显示的效果只是两边的部门。

题图上布景(logo) 是指所在的横长条的布景。

题图下布景(banner) 是指博客名字博客地址 复造 ?保藏本页)所在的那部门的布景。

logo和banner宽各为770,logo高40,banner高134,单元均为像素。

题图下的菜单布景” 是指“HOME。

  。。搜刮┆帮忙┆退出”等字所在的阿谁横长条的布景。

注释题目栏上翻时的图片 指的是文章颁发了之后文章题目的图片。

面板题目栏下翻时的图片 指的是点击题目后呈现题目后的后面的图片。

面板的布景图片 指的是右边好比我的文章列表什么的布景图片。

注释布景 是指整个文章文字所在的大布景!

以上代码能够更改博客各个部门的图片,改换的图片尺寸要和原尺寸一模一样,关于上传图片和怎么得到图片地址请参考:无限造上传图片的办法

若是想叫某一部门布景或者全数变的通明的话,在以上代码中大括号里面内容换上background:#transparent就能实现通明效果,

例如横幅代码:

  logo

{background:url("题图上布景图片地址") no repeat no scroll!mportant;}

以上代码中红色部门全数改成:background:#transparent

示范:

  logo{background:#transparent}

以上所有代码必需添加在已经有内容的模块中,例如模块里面已经有了时钟,气候预报等等内容!

  详细操做步调是:复造代码--->控造面板--->新增空白面板--->钩选源代码(呈现钩号,同时文档里呈现DIV的字样)--->粘贴代码--->钩选源代码(钩号消逝)--->保留新增面板--->定造小我首页--->拔取新增小我面板--->保留

0
回帖

新浪博客怎样以图片为背景发表文章?? 期待您的回复!

取消