CSS如何添加背景图片

html-css010

CSS如何添加背景图片,第1张

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

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

(1)相对的文件位置:

(2)测试代码:

测试效果:

扩展资料:

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

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

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

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

好多问题。一个一个来吧

1、css背景属性总的说来就一个。 background

其他的 backgroud-image , background-color, background-repeat等等都是它的分之。

用css控制背景,一个background就够了。比如:

background:#f00 url(图片地址) no-repeat

背景色为红色,有图片,图片不重复。如果分开写的话就要写3个属性,很不简洁。

2、盒子模型,其实就是把html的标签比喻成box(盒子)。盒子干嘛的?当然就是装东西的啦。

盒子属性有:

width height,宽高。px为单位。可以理解为内容区域。

padding 内边距。是内容距离盒子边缘的距离。

border边框。就是盒子的“墙壁”

margin 外边距。盒子与周围的其他盒子的距离。

另外,css3多了个圆角。 border-radius 也可以算是盒子模型中的编外分子。

特别强调盒子模型属性都要占位。比如:

#mydiv{

width:200px

height:100px

padding:10px

border:5px #000 solid

margin:30px

}

id为mydiv的标签 内容宽200px,但是它实际要站的宽度是 200+10*2+5*2+30*2=290px

3、浮动,就是给标签添加 float:left/right; 就行了。

浮动的作用就一个,让原本上下排列的结构,变成水平排列。

java不了解,就不回答了。

background-color 背景颜色

background-repeat 重复背景图像

background-position 背景图像位置

background-size 背景图像大小

background-origin 背景图像的定位区域

background-image 渐变