background-image CSS background-image的定义和用法
其实background-image的问题并不复杂，但是又很多的朋友都不太了解CSS background-image的定义和用法，因此呢，今天小编就来为大家分享background-image的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
background-image属性是什么
background-image属性为元素设置背景图像。
background-image属性用于为元素设置一个或多个背景图像，多个背景图像使用逗号来分隔。各个背景图像以堆叠的方式逐张放置在元素的上面。
在各个背景图像层中，第一个图像层最接近屏幕前的观察者。元素的边框会被绘制在背景图像的上面，而元素的background-color（背景颜色）则会被绘制在所有背景图像的下面。
background-image属性值模式
background-image的属性值模式就是用来给它加“特技”的。它的值模式有：
1、url()模式；
2、linear-gradient()模式；
3、repeating-linear-gradient()模式；
4、radial-gradient()模式；
5、repeating-radial-gradient()模式；
6、none特殊值。
除了url()模式，其他模式在其他的文章中都有过详细的介绍，如果不知道，出门左转。下面我来讲讲url()模式。和image标签中的src写法类似，url()中可以写绝对路径，也可以写相对路径，甚至也可以写其他域名下的图片资源。另外url()中的路径加不加引号也无所谓。
background-image: url()的url 怎么写
background-image: url(D:\MyWorkPlace\soft\skin\image\Default.gif)；
一般不建议这样存储网站文件，最好是放在项目中的Images图片文件夹内。项目中用到的所有图片资源都要放在项目目录中，不然只能在你的本地电脑浏览网页，如果发送给别人或部署在服务器端，网页会因为url找不到路径，而显示不全。
扩展资料：
CSS background-image属性用来设置一个元素的背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
background-image参数值：
参考资料：百度百科-CSS background-image
background-image:url()用法
background-image:url()用法如下：
background-image为元素设置背景图像，占据了元素的全部尺寸。
1、示例：
.div{。
background-image:url（xxx.jpg）；}。
background-image是指在元素背景中设置一个图像。
url是指图像的地址位置。
xxx.jpg是指图片名称以及前面需要添加图片路径。
2、background-image默认以左上角垂直的水平方向重复。
url可以使用绝对路径也可以使用相对路径。
3、默认值：none；不显示默认图像。
继承;no。
css3中属性值可以是多值模式，多个用英文逗号分隔。
示例:
background-image。
url(aaa.jpg)。
url(bbb.jpg)。
4、background-position属性设置图像的起始位置。
background-repeat定义图像的平铺模式。
background-attachment定义图像固定或者是页面滚动。
5、javascript使用：object.style.backgroundImage="url(xxx.jpg)"。
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);}
感谢您的阅读！希望本文对解决您关于background-image的问题有所帮助。如果您还有其他疑问，欢迎随时向我们提问。