[CSS基础教程]background属性详细解析

CSS背景图像属性background详细解析

CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看background提供的属性值:

background : background-color  | background-image  | background-repeat  | background-attachment  | background-position

从属性值的名字就可以很明白的看出来,分别是:颜色、图像、铺排、滚动、定位,其中background-repeat、background-position必须是在指定了background-image属性值后才有效。

background-color:transparent | color 。“transparent”是background-color的默认属性值(红色字表示默认值),意为背景色透明,也就是无背景色;而“color”则指的是颜色了,可以是HTML语言支持英文单词,也可以是十六进制的颜色值,当然推荐还是使用十六进制的颜色值来表示,比如黑色使用“#000”。

background-image:none | url 。默认属性值是无背景图,需要使用背景图时可用url进行导入。

background-repeat:repeat | no-repeat  | repeat-x  | repeat-y 。默认属性值是背景图像在纵向和横向上平铺,如果不希望图像平铺而是以一个完整的衬图来显示的时候则使用“no-repeat”,相同的道理在横向上平铺则是使用”repeat-x”纵向上平铺则使用”repeat-y”。

background-attachment:scroll | fixed 。“scroll”是背景图像随对像内容滚动,“fixed”则是背景图像固定。

background-position:position(length)  | position(length) 。对象的背景图像位置有两种方式可选择,一种是使用position(top | center | bottom | left | center | right)来定位背景图像位置,而另一种方式则是使用lefgth(数值)来定位,使用数值需要注意的是,当只有一个数值时,这个值将用于横坐标,纵坐标将默认是50%,如果有两个数值时,则分别是横坐标、纵坐标。

了解并熟悉了以上background属性及属性值之后,很容易的就可以对网页的背景图像做出合适的处理。但是在这里有一个小技巧,那就是在定义了background-image属性之后,应该定义一个与背景图像颜色相近的background-color值,这样在网速缓慢背景图像未加载完成或是背景图像丢失之后,仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图,那么文字的颜色自然而然会选择浅色调的甚至白色,如果此时背景图像未加载完成或者图像丢失,那么就需要定义一个黑色的背景颜色,才可以保持文字的可识别性。

时间: 2024-10-30 04:00:58

[CSS基础教程]background属性详细解析的相关文章

css基础教程

什么是CSS?它能做些什么? CSS实用教程(一) CSS实用教程(二) CSS实用教程(三) CSS实用教程(四) CSS实用教程(五) CSS实用教程(六) CSS产生的特殊效果 CSS样式表高效使用的技巧 使用不同的CSS写法-CSS进阶 CSS的字体.字型控制 利用CSS改善网站可访问性 给你的网页加上两种以上的文字链接效果 式样单的例子 深入透析样式表滤镜(上) 深入透析样式表滤镜(下) 关于CSS中的类-CLASS

JS批量操作CSS属性详细解析

 这篇文章主要介绍了JS批量操作CSS属性.需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title>     <style type="text/css">         .day         {      

JS批量操作CSS属性详细解析_javascript技巧

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">        .day        {         background-color:White;        }        .nig

jquery中常用的函数和属性详细解析

 本篇文章主要是对jquery中常用的函数和属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Dom: Attribute:属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map $("input").attr({&qu

css3教程:background属性调整增强

网页制作Webjx文章简介:css3.0对background的调整与增强. (注:仅对css3对background的调整.增加的属性进行了翻译)css3对于backgrounds做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用","逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显

jquery中常用的函数和属性详细解析_jquery

Dom:Attribute:属性$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map$("input").attr({"checked", "checked"}); $("img").

CSS基础教程:群组化选择器

常常我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个分开写会是一件满累人的工作,重覆性太高且显得冗长,更不好管理....在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并在一起,原本可能是写了7~8 行相同的语法,合在一起后就只要短短的一小行,怎么看都让人心旷神怡啊~ 例如:当有好几个选择器刚好都需要把文字的颜色设定为灰色的时候,一个一个分开写的方法式,感觉就很繁琐,如下: h1 { color:#666666; } h2 { color:#666666; } h3

css基础教程之网页结构布局

从本篇开始讲述如何用css实现网页的布局,即如何用css控制网页内各个元素的显示位置.如果你是一个初学者,很可能觉得做一个网页的第一步就是布局.其实不然,css网页的设计过程可以参考分为以下几步: 平面设计->页面切割->布局->细节控制 平面设计是一个网页的精髓所在,读者直接面对的界面,在本站以后的文章中会涉及此方面内容.也许你会认为在脑子里形成一个网站的大概印象就可以了,那么这种想法直接就给你贴上业余的标签.推荐工具:Photoshop: 页面切割其实可以划分到布局里,因为你的页面切

CSS基础教程:水平对齐(text-align)

水平对齐(text-align),用以设定元素内文本的水平对齐方式. 1.语法 text-align具体参数如下: 语法:text-align : left | right | center | justify 说明:设定元素内文本的水平对齐方式. 参数:left : 左对齐;right : 右对齐;center : 居中;justify : 两端对齐 初始值:跟浏览器的设置有关 继承性:可继承 适用于:block元素 其各参数在浏览器内的显示如图1所示. 图1 水平对齐方式 前三种对齐方式都很