css背景图片设置？CSS背景设置的背景图片
大家好，如果您还对css背景图片设置不太了解，没有关系，今天就由本站为大家分享css背景图片设置的知识，包括CSS背景设置的背景图片的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
css设置背景图片大小
网页的某些装饰可以通过背景图片来渲染，使得网页更加美观，CSS设置背景图片，不仅仅是大小，还有位置，放大方式，透明化之类。都是必备的CSS技能。层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。演示实例如下：
对于背景图片的导入，可以选择background或者background-image格式如下 body{backgroud:url("url")} body{backgroud-image:url("url")} background: url();
背景图片的显示方式： repeat:默认值，背景图像在纵向和横向上平铺 no-repeat:背景图像不平铺 repeat-x:背景图像仅在横向上平铺 repeat-y:背景图像仅在纵向上平铺代码如下（保存为html文档后用浏览器运行）!DOCTYPE html html head meta charset="utf-8" titlebackground_picture/title style body{ background-image:url(';); background-repeat:no-repeat; background-position:left top;}/style/head body h1Modify/h1 pno-repeat/p/body/html
由上个例子我们可以发现，其实可以对背景图片进行位置的定位： background-position： top left,； top righ；, bottom right； bottom left;代码如下：!DOCTYPE html html head meta charset="utf-8" titlebackground_picture/title style body{ background-image: url(';), url(';); background-repeat: no-repeat, no-repeat; background-position: right top, left top;}/style/head body h1Modify/h1 pbackground-position/p pright top and left top/p/body/html
所以可以对，background picture设置大小，首先设置窗口大小：格式： width：numbers unit(px) height：numbers unit(px)实例代码：!DOCTYPE html html head meta charset="utf-8" titlebackground_picture/title style body{ background-image: url(';), url(';); background-repeat: no-repeat, no-repeat; width: 300px, 300px; height: 280px, 280px; background-position: right top, left top; background-size: contain, contain;}/style/head body h1Modify/h1 pbackground-size/p pwidth and height/p/body/html
我们发现对background-size的设置有 cover、contain等参数。 cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。实例代码：!DOCTYPE html html head meta charset="utf-8" titlebackground_picture/title style body{ background-image: url(';), url(';); background-repeat: no-repeat, no-repeat; width: 300px, 300px; height: 280px, 280px; background-position: right top, left top; background-size: contain, cover;}/style/head body h1Modify/h1 pbackground-size/p pwidth and height/p/body/html
对图片进行放大与缩小使用background-size：percentage代码实例：!DOCTYPE html html head meta charset="utf-8" titlebackground_picture/title style body{ background-image: url(';), url(';); background-repeat: no-repeat, no-repeat; background-position: 50% 50%, 100% 100%; background-size: contain, cover;}/style/head body h1Modify/h1 pbackground-size/p/body/html格式如下： background-position: length|| length background-position: position|| position background-position-x: length| left| center| right background-position-y: length| top| center| bottom
怎样设置CSS背景图片路径
在CSS文件里，有时要用到background-image，即加一个背景图片，一般在显示标题时会经常用到。
现在来看两个文件目录:
/css/admin/main.js//js文件的目录
/css/admin/image/show.gif//图片的目录
举例：
1、现在在main.js文件里要用show.gif来做背景图片，那么要这样来写：background-image:url(image/td-top-4.gif);
这样写路径是因为main.js和image文件夹都是在css目录下的。
2、如果现在需要在一个jsp页面里定义这个图片路径，jsp页面ShowImage.jsp在test文件夹里，而test和css又在同一个目录下面，这时的图片路径就要有所改变了：
background-image:url(../css/admin/image/td-top-4.gif);这样即可正确的显示图片了。
这里的../是指回到上一层目录，如果是上两层目录呢？那就是../../。
当然，如果加上绝对路径不管怎么样都不会出错了，不过不推荐使用绝对路径，不利于程序的移植。
css中的背景图怎么改变大小
在css中控制插入背景图片的大小用background-size
background-size使用语法有下面四种情况
background-size: length|percentage|cover|contain
length用法：
background-size:100px；//背景图片显示的宽和高为100像素
background-size:100px 160px；//背景图片显示的宽为100像素，高为600像素
percentage用法：
background-size：60%；//背景图片的显示宽度和高度是图片大小60%；
background-size：60% 80%；//背景图片的显示宽度是图片大小的60%，高度是80%；
cover用法：
background-size：cover；//把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain用法：
background-size：contain；//把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
扩展资料
background-size属性浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在-webkit-,-ms-或-moz-前的数字为支持该前缀属性的第一个浏览器版本号。
参考资料
百度百科——background(计算机专业术语)
文章到此结束，如果本次分享的css背景图片设置和CSS背景设置的背景图片的问题解决了您的问题，那么我们由衷的感到高兴！