CSS添加背景图片

html-css08

CSS添加背景图片,第1张

css代码添加背景图片:

1.背景颜色:background-color

语法:{background-color:数值}

注意:在html当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。

表格背影颜色:style="background-color:red"

2.背景图片:background-image

语法:{background-image: url(url)|none}

3.背景重复:background-repeat

语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

作用:背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。

说明:参数取值范围:

·inherit 继承

·no-repeat 不重复平铺背景图片

·repeat-x 使图片只在水平方向上平铺

·repeat-y 使图片只在垂直方向上平铺

注意:如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。

4.背景固定:background-attachment

语法:{background-attachment:fixed|scroll}

·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动

·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动

注意:背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。

5.背景定位:background-position

语法:{background-position:数值|top|bottom|left|right|center}

作用:背景定位用于控制背景图片在网页中显示的位置。

·带长度单位的数字参数

·top:相对前景对象顶对齐

·right:相对前景对象右对齐

·center:相对前景对象中心对齐

·比例关系

关键字解释如下:

top left = left top = 0% 0%

top = top center = center top = 50% 0%

right top = top right = 100% 0%

left = left center = center left = 0% 50%

center = center center = 50% 50%

right = right center = center right = 100% 50%

bottom left = left bottom = 0% 100%

bottom = bottom center = center bottom = 50% 100%

bottom right = right bottom = 100% 100%

注意:参数中的center如果用于另外一个参数的前面,表示水平居中;如果用于另外一个参数的后面,表示垂直居中。

6. 背景样式:background

语法:{background:背景颜色|背景图象|背景重复|背景附件|背景位置}

作用:背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明。

扩展资料:

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。

参考资料来源:百度百科:css

通过css:background-image语句设置背景。

background-image 属性会在元素的背景中设置一个图像。根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。初始背景图像(原图像)根据 background-position 属性的值放置。

(1)相对的文件位置:

(2)测试代码:

测试效果:

扩展资料:

background-image 属性为元素元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

参考资料:百度百科--CSS background-image

CSS样式详解

字体样式(font)

字体

font-family:字体名

font-family:字体名1,字体名2...

font-family: fantasy | monospace | ncursive | serif | sans-serif

字体系列

cursive:模拟手写的字体,通常这类字体的曲线比较明显。

monospace:无比例的字体。通常用于模拟打字机中打出来的文字,也就是等宽字体。

serif:有比例有衬线的字体,这种字体中的所有字母都根据不同需要占有不同的宽度,有衬线是指在字母上做装饰的细线。

sans-serif:有比例无衬线的字体,这种字体中的所有字母都根据不同需要占有不同的宽度。

文字大小

font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 长度 | 百分比

xx-small:文字显示为最小(绝对);

x-small:文字显示为较小(绝对);

small:文字显示为小(绝对);

medium:默认值(绝对)

large:文字显示为大(绝对);

x-large:文字显示为较大(绝对);

xx-large:文字显示为最大(绝对);

larger:增大(相对);

smaller:减小(相对);

长度:数值加上单位;

百分比:相对字体大小。

文字大小调整

在英文方面,一段文字看上去是否舒服,很大程度上取决于当前字体的高度与这种字体的小写x字母高度的比值,这个比值称为字体的面值。

font-size-adjust: none | number

none:不改变文字大小;

number:强制文字使用面值。

粗体

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

normal:默认值(400),正常粗细;

bold:加粗(700);

bolder:比normal粗,比bold细;

lighter:不比normal粗;

x00:分9个级别,数值越大越粗。

斜体

font-style: normal | italic | bolique

normal:默认值,代表正常的字体;

italic:斜体;

bolique:倾斜的字体。

文字变形-小型大写字母

fontvariant: normal | small-caps

normal:默认值;

small-caps:小型大写字母

小型大写字母指将字母更改为大写字母,并且该大写字母比通常的大写字母要小。

文字变形-文字拉伸

font-stretch: normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

normal:默认值,不拉伸变形;

narrower:水平方向变窄;

wider:水平方向变宽;

condensed:压缩文字;

extra-condensed:压缩得很小;

ultra-condensed:压缩得特别小;

semi-condensed:从大到小逐步缩小;

semi-expanded:从小到大逐步变大;

expanded:拉伸文字;

extra-expanded:拉伸得很大;

ultra-expanded:拉伸得特别大。

PS:font-stretch是CSS2中所规定的属性,目前还没有浏览器可以支持该属性。

修饰

text-decoration: none | underline | overline | line-through | blink

none:默认值,无修饰样式;

underline:下划线;

overline:上划线;

line-through:贯穿线;

blink:闪烁。

阴影

text-shadow: none | color | length | length | length | inherit

none:不设置;

color:阴影的颜色;

length:长度值;

inherit:继承父级样式。

阴影有3个length要进行设置,分别是水平方向的距离、垂直方向的距离和模糊半径的长度(不能为负值)。

大小写转换

text-transform: capitalize | uppercase | lowercase | none | inherit

capitalize:首字母大写;

uppercase:变大写;

lowercase:变小写;

none:不改变;

inherit:继承。

间距-行间距

行间距:文本行与行之间的距离

line-height: normal | number | length | 百分数 | inherit

normal:默认值;

number:在当前文字大小的基础上再做增加来设置行高(不能为负值);

length:指定行高数(不能为负值);

百分数:用百分数表示行高;

inherit:继承。

行高是指上一行文字的基线与下一行文字之间的基线之间的距离,行高等于行间距加上文字高度。

间距-字间距

letter-spacing: normal | length | inherit

normal:默认值;

length:字间距的大小;

inherit:继承。

词间距

word-spacing: normal | length | inherit

normal:默认值;

length:词间距的大小;

inherit:继承。

文本样式

文字缩进

text-indent: length | 百分数 | inherit

length:缩进量;

百分数:父级元素的百分比;

inherit:继承。

水平对齐

text-align: left | right | center | justify | string | inherit

left:左对齐;

right:右对齐;

center:居中对齐;

justify:两端对齐;

string:字符对齐,多用于表格里;

inherit:继承。

垂直对齐

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分数 | length | inherit

baseline:默认值,基线对齐;

sub:下标;

super:上标;

top:顶端对齐;

text-top:文本行顶端对齐;

middle:中间对齐;

bottom:底端对齐;

text-bottom:文本行底端对齐;

百分数:相对于父级元素的基线的百分比;

length:调整长度;

inherit:继承。

文字方向-文本流入方向

derection: ltr | rtl | inherit

ltr:left to right,默认值,从左到右流入;

rtl:right to left,从右到左流入;

inherit:继承。

文字方向-文字方向

unicode-bidi: normal | embed | bidi-override | inherit

normal:默认值,不打开流入的文字,对其文字不重排;

embed:打开流入的文字,在对象内部进行隐式重排;

bidi-override:严格按流入方向重排文字;

inherit:继承。

文字方向-竖排文字

layout-flow: horizontal | vertical-ideographic

horizontal:书写方向从左到右,由上而下;

vertical-ideographic:书写方向从上至下,由左至右。

空格处理

white-space: normal | pre | nowrap | inherit

normal:默认值,浏览器自动忽略多余的空格,连续多个空格只显示一个;

pre:类似于pre元素,浏览器不忽略源代码的空格;

nowrap:不自动换行;

inherit:继承。

词间换行

word-break: normal | break-all | keep-all

normal:默认值,对于英文则以单词为单位换行,对于中文则以字为单位换行;

break-all:英文以字母为单位换行;

keep-all:对于英文以单词为单位换行,对于中文则以标点或空格为单位换行。

首字样式

使用伪元素fitst-letter,对于英文则代表第一个字母,对于中文则代表第一个文字。

首行样式

使用伪元素first-line,设置第一行文字的样式。

颜色与背景样式

文本颜色:指文本的颜色。

color: 颜色 | inherit

颜色:使用指定颜色值;

inherit:继承。

背景色:指元素后面背景的颜色。

background: transparent | 颜色 | inherit

transparent:设置透明,默认值;

颜色:使用指定颜色值;

inherit:继承。

背景图片

background-image: none | url(路径) | inherit

none:无背景图片(默认值);

url(路径):图片的URL地址;

inherit:继承;

背景附件:指背景图片如何依附元素。

background-attachment: scroll | fixed | inherit

scroll:滚动,随内容滚动,默认值;

fixed:固定,不随内容滚动;

inherit:继承。

背景重复

background-repeat: repeat | no-repeat | repeat-x | repeat-y | inherit

repeat:重复,平铺图片,默认值;

no-repeat:不重复,不平铺图片;

repeat-x:水平方向重复;

repeat-y:垂直方向重复;

inherit:继承。

背景定位:背景图片的定位,要设置两个值,分别是相对于元素左上角的x轴和y轴,默认是0px。

background-position: top | center | bottom | left | right | 数值 | 百分数 | inherit

top:顶部;

center:中部;

bottom:底部;

left:左侧;

right:右侧;

数值:用数值指定图片的位置;

百分数:用百分数表示位置;

inherit:继承;

背景综合应用(可节省代码)

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

background-color:颜色;

background-image:图片;

background-repeat:重复方式;

background-attachmen:附件;

background-position:定位。