解读CSS的背景(background)样式

background-color:

可以为所有的元素设置背景色,这个属性接受任意合法的颜色值,如果希望背景色从元素文本向外少有延伸,只需增加一些内边距(padding)。

注意:background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。事实上,所有背景属性都不能继承。

background-image:

background-image 属性的默认值是 none,表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

background-repeat:

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。

background-position:

利用background-position可以改变图像在背景中的位置,background-position的属性有很多方法,下面详细解读:

关键字:

图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。如果只出现一个关键字,则认为另一个关键字是 center。

百分数值:

默认值是 0% 0%,在功能上相当于 top left,这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。如果你提供的属性值是50% 50%,这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。

长度值:

长度值解释的是元素内边距区左上角的偏移,偏移点是图像的左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐,可以结合函数第四象限坐标来理解。

注意:需要把 background-attachment 属性设置为 "fixed",才能保证position属性在 Firefox 和 Opera 中正常工作。

background-attachment

background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。

关于背景属性,你还可以使用简写属性来将所有背景属性设置在一个声明之中。举个栗子:

body{ background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;}

时间: 2025-01-06 23:04:21

解读CSS的背景(background)样式的相关文章

css之背景(background)家族

背景(background)是css中很重要的一部分,也是css的基础知道之一,现在来回顾css2中5个属性与css3中新增的3个属性和2个功能. CSS2_背景(background)前传 家族成员 背景(background)家族在css2中由5个主要的背景属性组成,分别是: background-color 指定填充的背景颜色 background-image 引用图片作为背景图 background-position 指定元素背景图片的位置 background-repeat 决定背景图

CSS 背景background实例

css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Css background背景语法 CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: background-color || background-image || background-repeat || back

css中的段落样式及背景

一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent : length text-align : left | right | center | justify letter-spacing : normal | length text-overflow:clip | ellipsis word-wrap:normal | break-word 其中

2014年辛星解读CSS第八节 使用背景图片

这应该是系统CSS的教程的最后一节了,为什么呢,因为到这一节,我感觉基础知识就已经讲完了,接下来的就是无穷的实战,而实战是很难用知识去讲出来的,靠的是积累,拼的是经验,这些都不是讲出来的. 好,我们下面来说一下用CSS添加背景图片的方式把,它在background属性中指定,可以用url("图片路径")的方式来指定背景图片,如果是repeat,则图片在横向和纵向上平铺,如果是no-repeat,则背景图像不会平铺,只显示一次,如果是repeat-x,那么就在水平方向平铺,如果是repe

CSS背景background、background-position使用详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性). css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性,它们是: * p

Mirror app HTML样式CSS之DIV遮罩背景层样式

设置背景图片后,如果背景图片颜色太亮,则建议放个div遮罩背景层-目前Google 放出的css中div遮罩层的样式: 1 /* Overlay gradient to allow text to be read over the image. */ 2 3 /* For cards with two lines of text (excluding footer) 4 * ex: hybrid templates & those needing more bottom readability

(转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

css设置背景颜色和处理背景图片样式

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>css设置背景颜色和处理背景图片样式</title> <style> div{ width:1000px; height:500px;/*没有宽高不能加背景图片*/ border:1px solid #000000; /*background-co

CSS基础知识之背景图片样式属性、雪碧图、列表导航栏、超链接的伪类样式、盒子模型、overflow、圆角弧度

目录: 背景图片样式属性 雪碧图 列表导航栏 超链接的伪类样式 盒子模型. overflow. 圆角弧度 背景图片样式属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #imgContainer { border: 20px dotted yellow; padding: 50px; height: 400p