html网页背景图片设置

建站教程 心晴客栈 9983次浏览 0个评论 扫描二维码

背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。

body {background-color:#99FF00;}
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。

演示示例

背景图片属性(background-image)
这个属性为HTML元素设定背景图片,相当于HTML中background属性。

<body style=”background-image:url(../images/css_tutorials/background.jpg)”>
上面的代码为Body这个HTML元素设定了一个背景图片。

演示示例

背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用,决定背景图片是否重复。如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。

repeat-x 背景图片横向重复
repeat-y 背景图片竖向重复
no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代码表示图片竖向重复。

演示示例

背景附着属性(background-attachment)
这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代码表示图片固定不动,不随内容滚动而动。

演示示例

背景位置属性(background-position)
这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。

body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。

演示示例

背景属性(background)
这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。

————————————————————————-

以下就是各个版面背景修改的代码,具体的操作在代码下方
<STYLE type=text/css>
.bodybox{background: url(大背景网址) repeat }
.bodybg{background:url(文章背景网址) repeat}
.bodybottom{background:url(页脚背景网址)}
.logo{background:url(页眉背景网址)}
.banner{background:url(大标题背景网址)}
.menu{background:url(菜单栏背景网址)}
.feeds .up { BACKGROUND: url(文章标题上翻背景网址)}
.feeds .down {BACKGROUND: url(文章标题展开背景网址) }
.feeds .function {BACKGROUND: url(文章评论背景网址)}
.feeds .page
{background:url(“正文文章页数图片地址”) no-repeat center;}

.callboard .up { BACKGROUND: url(公告栏上翻网址)}
.callboard .down { BACKGROUND: url(公告栏展开网址)}
.links .down { BACKGROUND: url(小标题展开网址)}
.links .up {BACKGROUND: url(小标题上翻图片网址)}
.calendar .mid {BACKGROUND: url(日历背景图网址)}
.label .mid {BACKGROUND: url(自定义面板背景网址)}
.links .mid {BACKGROUND: url(小标题背景网址)}
.links .more { BACKGROUND: url(More小图标网址) no-repeat WIDTH:50px;HEIGHT:18px}
.photo .mid {BACKGROUND: url(形象照片背景网址) }
.callboard .mid {BACKGROUND: url(公告栏背景网址)}
.gbook .up{background:url(“留言板标题栏上翻时的图片地址”) no-repeat;}
.gbook .down{background:url(“留言板标题栏下翻时的图片地址”) no-repeat;}
</STYLE>
可以自己去百度或google搜,喜欢的图片,点右键,选属性,将属性中的图片网址复制后替换()中的内容即可,当然,添加的步骤还是:
1.将代码添加到新建的自定义画板的代码里(将显示代码前打勾,即可添加),保存
2.在定制我的首页中添加刚才创建的面板,之后保存
3.如果还有不清楚的,参照添加投票系统一文
4.将网址放到""里也就是说正确的形式是:….:url(“加你的网址”)…
5.“大背景(body)”指的是整个博客的最大背景,由于中间部分被覆盖,所以显示的效果只是两边的部分(1024*768规格)。
“页眉背景(logo)”是指所在的横长条的背景。
“大标题背景(banner)”是指博客名字(如 心晴客栈)所在的那部分的背景。
“菜单栏背景”是指“HOME…搜索┆帮助┆退出”等字所在的那个横长条的背景。
“文章标题上翻背景图片”指的是文章发表了之后文章标题的图片。
“小标题展开时的图片”指的是点击标题后出现标题后的后面的图片。
“小标题背景图片”指的是左边比如我的文章列表什么的背景图片。

下面是固定背景的代码:
<DIV>
<style type=text/css>
<!–
body{
background:url(图片url地址) #ffffff repeat scroll!important;
}
–>
</style>
</DIV>
此代码的操作说明:
1.操作同上
2.代码中的#ffffff表示背景颜色(白色),可修改为你想要的背景颜色代码,具体的颜色编号去这里查找 https://www.yonghappy.com/1175
3.repeat表示图片平铺,不想平铺则改为no-repeat.
4.scroll表示图片随对象滚动.图片固定不滚动改为fixed.
5.!important表示这里的设置优先.不要将它去掉,否则有可能会引起冲突.造成显示不正常

支持博主

心晴客栈 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明html网页背景图片设置
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址