欢迎来到m1938工作室
帮助中心

网页背景颜色与背景设置

  • 企业网站教程
  • 编辑:m1938
  • 时间:02/20
  • 阅读:5307

color
background-color
background-image
background-repeat
background-attachment
background-position
background
前景色:‘color’属性
CSS属性color用于指定元素的前景色。
例如,假设你要让页面中的所有标题(headline)都显示为深红色,而这些标题采用的都是h1元素,那么可以用下面的代码来实现把h1元素的前景色设为红色。

h1 {
color: #ff0000;
}

颜色值可以用十六进制表示(比如上例中的#ff0000),也可以用颜色名称(比如“red”)或RGB值(比如rgb(255,0,0))表示。
‘background-color’属性
CSS属性background-color用于指定元素的背景色。
因为body元素包含了HTML文档的所有内容,所以,如果要改变整个页面的背景色的话,那么为body元素应用background-color属性就行了。
你也可以为其他包含标题或文本的元素单独应用背景色。在下例中,我们为body和h1元素分别应用了不同的背景色。

body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}


注意:我们为h1元素应用了两个CSS属性,它们之间以分号(“;”)分隔。
背景图像[background-image]
CSS属性background-image用于设置背景图像。
在下面的示例中,我们使用了一张蝴蝶的图像作为背景。你可以将该图片下载下来(方法为:鼠标右击该图片,然后选择“图片另存为”),以便在自己的计算机上使用。当然,你也可以选用其他你觉得满意的图片。

如果要把这个蝴蝶的图片作为网页的背景图像,只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}


注意我们指定图片存放位置的方式:url("butterfly.gif")。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片,只需给出存放路径即可(比如url("../images/butterfly.gif"));此外,你甚至可以通过给出图片的地址来引用因特网(Internet)上的图片(比如url("http://www.html.net/butterfly.gif"))。
平铺背景图像[background-repeat]
你有没有发现在上例中那个蝴蝶图片在横向和纵向都被平铺了?CSS属性background-repeat就是用于控制平铺的。
下表概括了background-repeat的四种不同取值。
值 描述 示例
background-repeat:repeat-x 图像横向平铺
background-repeat:repeat-y 图像纵向平铺
background-repeat:repeat 图像横向和纵向都平铺
background-repeat:no-repeat 图像不平铺
例如,为了避免平铺背景图像,代码应该这样:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}


固定背景图像[background-attachment]
CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。
一个固定的背景图像不会随着用户滚动页面而发生滚动(它是固定在屏幕上的),而一个非固定的背景图像会随着页面的滚动而滚动。
下表概括了background-attachment的两种不同取值。你可以点击示例察看二者的区别。
值 描述 示例
background-attachment:scroll 图像会跟随页面滚动——非固定的
background-attachment:fixed 图像是固定在屏幕上的
例如,下面的代码将背景图像固定在屏幕上。

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}


放置背景图像[background-position]
缺省地,背景图像将被放在屏幕的左上角。但是,你可以通过CSS属性background-position来修改这一缺省设置,将背景图像摆放在屏幕上你觉得满意的地方。
设置background-position属性的值有多种方式。不过,它们都是坐标的格式。举例来说,值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。
坐标可以是以百分比或固定单位(比如像素、厘米等)作为单位的值,也可以是“top”、“bottom”、“center”、“left”和“right”这些值。下图对此进行了解释:


下表给出了一些例子。
值 描述 示例
background-position:2cm 2cm 图像被放置在页面内距左边2厘米、顶部2厘米的地方
background-position:50% 25% 图像被放置在页面内水平居中、离顶部四分之一处
background-position:top right 图像被放置在页面的右上角
在下例中,背景图像被放置在页面的右下角:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}


缩写[background]
CSS属性background是上述所有与背景有关的属性的缩写用法。
使用background属性可以减少属性的数目,因此令样式表更简短易读。
比如说下面五行代码:

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

如果使用background属性的话,实现同样的效果只需一行代码即可搞定:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

各个值应按下列次序来写:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
如果省略某个属性不写出来,那么将自动为它取缺省值。比如,如果去掉background-attachment和background-position的话:

background: #FFCC66 url("butterfly.gif") no-repeat;

这两个未指定值的属性将被设置为缺省值:scroll和top left。


全部评论(0)
推荐教程
  • 苹果CMS10影视程序自动采集教程
  • 苹果CMS10影视程序自动采集教程
  • 在建立好自己的网站添加自定义资源库后,由于手动采集方式比较耗时间和精力更新也不够及时,是不是特别希望能有一个全自动定时采集方法来帮助网站增加视频资源解放自己的双手,m1938工作室现在就教大家如何用宝塔一步一步实现这个定时采集任务。1.进入苹果CMS10后台,点击–采集2.在采集页面,点击左侧“自定义资源库,鼠标右键点击需要采集的内容,如“采集当天”、“采集本周””采集所有“,选择复制链接地址。  &nb
  • 苹果cmsv10教程
  • 来源:m1938
  • 编辑:m1938
  • 时间:02/20
  • 阅读:13950
  • 苹果cmsV10图片域名替换教程
  • 苹果cmsV10图片域名替换教程
  • 封面图片域名更换:所下图所示操作注意切记填写域名时千万不要有空格  按图片步骤操作    具体操作如下图
  • 苹果cmsv10教程
  • 来源:m1938
  • 编辑:m1938
  • 时间:02/20
  • 阅读:9167
  • 苹果cmsV10视频域名替换教程
  • 苹果cmsV10视频域名替换教程
  • 视频域名更换:所下图所示操作 切记填写域名时千万不要有空格按图片步骤操作    具体操作如下图
  • 苹果cmsv10教程
  • 来源:m1938
  • 编辑:m1938
  • 时间:02/20
  • 阅读:6183
  • 苹果cmsv10的程序详细安装教程和m1938工作室模板安装教程
  • 苹果cmsv10的程序详细安装教程和m1938工作室模板安装教程
  • 推荐的服务器环境配置首先第1步在你的服务器安装好宝塔面板bt.cn通过你的服务器在这个域名下载安装好安装好了之后会生成一个面板地址,用户名和密码然后通过你的面板地址访问登录登录bt面板之后左边导航有一个软件商店按照下面的环境配置
  • 苹果cmsv10教程
  • 时间:02/20
  • 阅读:22346
本站声明 M1938工作室开发制做的最新苹果cmsV8模板、苹果cmsV10模板、马克斯max模板、海洋CMS模板、飞飞cms模板、等,使用并请遵循国家法律法规之规定使用。若因非法使用引起纠纷,一切后果由使用者承担。
网站首页  |   关于我们  |   广告合作  |   联系我们  |   隐私条款  |   免责声明  |   网站地图
CopyRight 2008-2023 m1938工作室    粤ICP备11013698号-2    
联系客服
在线客服 售后服务 模板仿制 联系客服
TG;@m1938top
手机版

扫一扫进手机版
返回顶部