background-image怎么用,background image什么意思

http://www.itjxue.com  2023-01-20 11:04  来源:未知  点击次数: 

background-image属性是什么?

background-image属性为元素设置背景图像。

background-image属性用于为元素设置一个或多个背景图像,多个背景图像使用逗号来分隔。各个背景图像以堆叠的方式逐张放置在元素的上面。

在各个背景图像层中,第一个图像层最接近屏幕前的观察者。元素的边框会被绘制在背景图像的上面,而元素的background-color(背景颜色)则会被绘制在所有背景图像的下面。

background-image属性值模式

background-image的属性值模式就是用来给它加“特技”的。

background-image 属性会在元素的背景中设置一个图像。

根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。

初始背景图像(原图像)根据 background-position 属性的值放置。

background-image:url()用法

使用简写属性时,属性值的顺序为:

background-color 背景颜色

background-image 背景图片 url( )

background-repeat 背景图片平铺

repeat 背景图像将向垂直和水平方向重复。这是默认

repeat-x 只有水平位置会重复背景图像

repeat-y 只有垂直位置会重复背景图像

no-repeat background-image不会重复

background-attachment 背景图片固定

scroll 背景图片随页面的其余部分滚动。这是默认

fixed 背景图像是固定的

background-position 背景图片定位

x% y% 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%,默认值为:0%0% |。

这两个值也可以是left,rigth和center。

xpos ypos 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他。如果仅指定了一个值,其他值将是50%。

CSS background-image的定义和用法

background-color 属性设置元素的背景颜色。

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

transparent 值

尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。 默认值:transparent继承性:no版本:CSS1JavaScript 语法:object.style.backgroundColor=#00FF00body {background-color:yellow;}h1 {background-color:#00ff00;}p {background-color:rgb(255,0,255);}

(责任编辑:IT教学网)

更多

推荐人物新闻文章