CSS基础教程: CSS的Background Images 背景图片

2016-02-19 13:40 11 1 收藏

今天图老师小编要跟大家分享CSS基础教程: CSS的Background Images 背景图片,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

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

body {
    background: white url(/jc/UploadFiles/200803/20080309225852658.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)

来源:http://www.tulaoshi.com/n/20160219/1604925.html

延伸阅读
标签: Web开发
如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。 比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。 所以一般用作背景图...
标签: Web开发
有一系列属性可以改变网页文字的大小和形状,概要如下: font-family 文字使用的字体,比如宋体,Times New Roman,Arial等等 这个属性必须详细制定,不能使用偏僻的字体,要使用安全字体(比如arial,verdana和times new roman和宋体),可以同时指定许多字体,只要使用逗号分开即可。这样的用意是,如果用户...
标签: Web开发
语法: background-color : transparent | color 取值: transparent : 默认值。背景色透明 color : 指定颜色。请参阅 颜色单位 和 附录:颜色表 说明: 设置或检索对象的背景颜色。 当背景颜色与背景图像( background-image )都被设定了时,背景图片将覆盖于背景颜色之上。 此属性对于 currentStyle 对象而言是只读的。对于其...
标签: Web开发
背景 background css 说明 background-image:url("图片的网址"); 背景图 background: url(" 图片的网址 "); 背景 background-color:#色码; 背景色彩 background-image:url(背景图案.jpg,gif,bmp); background-color:#FFFFFF;  background-color : transparent;    --设定背景为透明色 -------------------------...
标签: Web开发
使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。 其实,要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。 CSS中关于定位(p...

经验教程

301

收藏

37
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部