css样式教程 12、CSS的Background Images 背景图片

背景图片Background Images有许多属性可以操作。
  幸运的是,可以使用background处理所有:


程序代码 程序代码
body {
    background: white url( htmldog.com/images/bg.gif" target="_blank">http://www. htmldog.com/images/bg.gif) no-repeat top right;
}

  上面合并了下面属性:


程序代码 程序代码
  background-color出现在前面。 
  background-image图片的位置。 
  background-repeat图片重复的形式。背景图片可以重复repeat(这就像建筑用的瓦片一样),repeat-x在x轴(左右)重复,repeat-y在y轴(上下)重复,no-repeat不重复只显示一个。 
  background-position可以使用top,center,bottom,left,right或任何可以看到的组合,比如above在上面。

  可以为大部分 html元素设置背景图片,不只是整个页面(body),可以用来制作简单但效果显著的美化,比如圆角等等不同的边角形状。
  使用背影图片非常简单,而且可以使用在页面的任何地方。许多人喜欢使用色彩鲜艳的图片作为背景的页面,带给用户判读前台文字困难加大。这是一个极端的例子,但事实上,大部分对用户友好、可读性强的文本是白色背景上显示黑色,或是黑色背景显示白色(建议使用柔和的颜色做为背景,减少刺眼的颜色)

  所以,最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡,这样同样有利于减少图片大小,因为使用更少的颜色。(建议使用索引色格式,比如GIF) 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值