CSS如何添加背景图片 html里怎么插入背景图片？？急
CSS\u4e2d\u5982\u4f55\u8bbe\u62c9\u4f38\u80cc\u666f\u56fe\u7247\u94fa\u6ee1\u5c4f\u5e55body{
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;\u6216\u8005background-size:100%;
}
\u6269\u5c55\u8d44\u6599:
CSS\u4e0d\u4ec5\u53ef\u4ee5\u9759\u6001\u5730\u4fee\u9970\u7f51\u9875\uff0c\u8fd8\u53ef\u4ee5\u914d\u5408\u5404\u79cd\u811a\u672c\u8bed\u8a00\u52a8\u6001\u5730\u5bf9\u7f51\u9875\u5404\u5143\u7d20\u8fdb\u884c\u683c\u5f0f\u5316\u3002 CSS \u80fd\u591f\u5bf9\u7f51\u9875\u4e2d\u5143\u7d20\u4f4d\u7f6e\u7684\u6392\u7248\u8fdb\u884c\u50cf\u7d20\u7ea7\u7cbe\u786e\u63a7\u5236\uff0c\u652f\u6301\u51e0\u4e4e\u6240\u6709\u7684\u5b57\u4f53\u5b57\u53f7\u6837\u5f0f\uff0c\u62e5\u6709\u5bf9\u7f51\u9875\u5bf9\u8c61\u548c\u6a21\u578b\u6837\u5f0f\u7f16\u8f91\u7684\u80fd\u529b\u3002
\u7f16\u7a0b\u5de5\u5177
\u8bb0\u4e8b\u672c\uff1a\u4f7f\u7528Windows\u7cfb\u7edf\u81ea\u5e26\u7684\u8bb0\u4e8b\u672c\u53ef\u4ee5\u7f16\u8f91\u7f51\u9875\u3002\u53ea\u9700\u8981\u5728\u4fdd\u5b58\u6587\u6863\u65f6\uff0c\u4ee5.html\u4e3a\u540e\u7f00\u540d\u8fdb\u884c\u4fdd\u5b58\u5373\u53ef\u3002
Dreamweaver\uff1a\u5b83\u4e0eFlash\u3001Fireworks\u5e76\u79f0\u7f51\u9875\u4e09\u5251\u5ba2\u3002Dreamweaver\u662f\u96c6\u7f51\u9875\u5236\u4f5c\u548c\u7ba1\u7406\u7f51\u7ad9\u4e8e\u4e00\u8eab\u7684\u6240\u89c1\u5373\u6240\u5f97\u7f51\u9875\u7f16\u8f91\u5668\uff0c\u5b83\u662f\u7b2c\u4e00\u5957\u9488\u5bf9\u4e13\u4e1a\u7f51\u9875\u8bbe\u8ba1\u5e08\u7279\u522b\u5f00\u53d1\u7684\u89c6\u89c9\u5316\u7f51\u9875\u5f00\u53d1\u5de5\u5177\uff0c\u5229\u7528\u5b83\u53ef\u4ee5\u8f7b\u800c\u6613\u4e3e\u5730\u5236\u4f5c\u51fa\u5145\u6ee1\u52a8\u611f\u7684\u7f51\u9875\u3002
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1a\u767e\u5ea6\u767e\u79d1:CSS
1\u3001\u63d2\u5165\u80cc\u666f\u56fe\u7247\u6709\u4e24\u79cd\u65b9\u6cd5\uff0c\u4e00\u79cd\u662f\u7528html\u7684img\u6807\u7b7e\uff0c\u53e6\u4e00\u79cd\u662f\u5229\u7528css\u7684background\u6807\u7b7e\u63d2\u5165\u3002\u5177\u4f53\u64cd\u4f5c\u662f\u9996\u5148\u65b0\u5efa\u4e00\u4e2ahtml\u6587\u4ef6\uff0c\u5199\u5165\u4e24\u4e2adiv\uff0c\u5206\u522b\u7528\u6765\u6f14\u793a\u4e24\u79cd\u65b9\u6cd5\u63d2\u5165\u6807\u7b7e\uff1a
2\u3001\u9996\u5148\u662f\u7528html\u6807\u7b7e\u63d2\u5165\u56fe\u7247\uff0c\u8fd9\u91cc\u76f4\u63a5\u5728img\u6807\u7b7e\u4e2d\u4f7f\u7528src\u5c5e\u6027\u5c31\u53ef\u4ee5\u63d2\u5165\u56fe\u7247\u8def\u5f84\u5c31\u6210\u529f\u4e86\uff1a
3\u3001\u63a5\u7740\u662f\u7528css\u63d2\u5165\uff0c\u5728div\u4e2d\u8bbe\u7f6eclass\u5c5e\u6027\u4e3aimg2\uff0c\u5728script\u6807\u7b7e\u4e2d\u4f7f\u7528background\u6807\u7b7e\u63d2\u5165\uff0c\u5176\u4e2durl\u662f\u6807\u7b7e\u7684\u8def\u5f84\uff0cno-repeat\u662f\u8bbe\u7f6e\u56fe\u7247\u4e0d\u91cd\u590d\uff0ccenter\u662f\u8bbe\u7f6e\u7167\u7247\u5c45\u4e2d\u663e\u793a\uff1a
4\u3001\u6700\u540e\u7ed9\u8fd9\u4e9b\u6807\u7b7e\u90fd\u8bbe\u7f6e\u4e00\u4e9b\u6837\u5f0f\uff0c\u8ba9\u5b83\u4eec\u663e\u5f97\u7f8e\u89c2\u4e00\u4e9b\u3002\u7136\u540e\u6253\u5f00\u6d4f\u89c8\u5668\u67e5\u770b\u6548\u679c\uff1a
5\u3001\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u53ef\u4ee5\u770b\u5230\u7167\u7247\u90fd\u663e\u793a\u51fa\u6765\u4e86\u3002\u4ee5\u4e0a\u5c31\u662fhtml\u63d2\u5165\u7167\u7247\u7684\u65b9\u6cd5\u4ecb\u7ecd\uff1a
通过css：background-image语句设置背景。
background-image 属性会在元素的背景中设置一个图像。根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。初始背景图像（原图像）根据 background-position 属性的值放置。
（1）相对的文件位置：
（2）测试代码：
测试效果：
扩展资料：
background-image 属性为元素元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
参考资料：百度百科--CSS background-image
css代码添加背景图片常用代码
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(url)|none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
1．背景颜色：background-color
语法：{background-color:数值}
说明：参数取值和颜色属性一样
注意：在html当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。现在用css就可以轻松地直接搞定了，而且对象的范围很广，可以是一段文字，也可以只是一个单词或一个字母。
例子：给部分文字加背景颜色给部分文字加背景颜色
表格背影颜色：style="background-color:red"
2．背景图片：background-image
语法：{background-image: url(url)|none}
说明： url就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径，将什么也不显示。
例子：给部分文字加背景图片 .imgbgstyle { background-image: url(logo.gif)}
3．背景重复：background-repeat
语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用：背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片
说明：参数取值范围：
·inherit 继承
·no-repeat 不重复平铺背景图片
·repeat
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺
注意：如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4．背景固定：background-attachment
语法：{background-attachment:fixed|scroll}
说明：参数取值范围
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动
·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
注意：背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。
例子：使背景图案不随文字“滚动”的css
body { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5．背景定位：background-position
语法：{background-position:数值|top|bottom|left|right|center}
作用：背景定位用于控制背景图片在网页中显示的位置。
说明：参数取值范围
·带长度单位的数字参数
·top：相对前景对象顶对齐
·bottom：相对前景对象底对齐
·left：相对前景对象左对齐
·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:背景颜色|背景图象|背景重复|背景附件|背景位置}
作用：背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明:
例子：
body { background: white url(http://www.htmlhelp.com/foo.gif) }
blockquote { background: #7fffd4 }
p { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
table { background: #0c0 url(leaves.jpg) no-repeat bottom right }
注意：当一个值未被指定时，将接受其初始值。例如，在上述的前三条规则，背景位置属性将被设置为0% 0%。为了避免与用户的样式表之间的冲突，背景和颜色应该一起被指定。
<title无标题文档</title</head<style#pic{height:200px;
width:200px;
background-image:url(images/ad1.png);
background-position:center;
background-repeat:no-repeat;}</style<body<div id="pic"这里填写文字<div</body</html设置图片的地址请在url括号中设置：
background-image:url(images/ad1.png);
设置图片的位置，这里是局中设置，当然您可以right和left设置：
background-position:center;
背景图片是否重复填充HTML标签，这里设置的是只显示一次
background-repeat:no-repeat;
至于height和width的设置，这个是您所说的HTML元素的高度和宽度，可以根据背景图片的高度和宽度进行设置
如果您有任何问题都可以在下面的网站中留言，只要力所能及，我一定为您解答
span是行内元素（inline）,你需要将span转化为块级元素才可以准确设置边框和背景，当然inline-block也是可以的，记得为ie设置兼容哦
在一个页面的head 标签内部 写个样式
<style>
body {background:url(/xxx/yyy/x.jpg)}
</style>
路径要正确，不认识路径规则的话 百度搜索一下 相对路径 和绝对路径 这些都是必须要懂的
绛旓細缁檚pan澧炲姞涓涓猚lass锛屼緥濡傦細鏂囧瓧鐒跺悗css閲屽啓涓婏細.title { background: #000 url("鑳屾櫙鍥剧墖鍦板潃"); }
绛旓細褰撲竴涓牱寮忓彧闇瑕佸湪涓涓厓绱犱笂搴旂敤涓娆℃椂锛岃浣跨敤鍐呰仈鏍峰紡锛岄渶瑕佷娇鐢ㄧ浉鍏虫爣绛句腑鐨剆tyle灞炴с傛牱寮忓睘鎬у彲浠ュ寘鍚换浣CSS灞炴с傜敱浜庢贩鍚堜簡琛ㄧず鍜屽唴瀹癸紝鍐呰仈鏍峰紡灏嗗け鍘绘牱寮忚〃鐨勮澶氫紭鐐广備緥濡:2銆佸湪杩欎釜缃戦〉涓璂IV鐨勬枃鏈唴瀹逛腑锛屽彲浠ユ坊鍔犳湁鑳屾櫙闊充箰鐨勭綉椤碉紱3銆佽涓虹綉椤娣诲姞鑳屾櫙闊充箰锛屽彲浠ヤ娇鐢╡mbed鏍囩锛屽苟涓哄叾娣诲姞...
绛旓細鐢╞ackground灞炴 渚嬪锛歜ody{background:url(images/bg.jpg) no-repeat } 鍏朵腑 url(images/bg.jpg) 涓鑳屾櫙鍥剧墖璺緞锛沶o-repeat 琛ㄧず涓嶉噸澶嶃傝繖涓煎彲浠ヤ负 repeat銆乺epeat-x銆乺epeat-y鎴栬卬o-repteat 銆傞粯璁や负repeat銆 repeat-x 涓烘í鍚戦噸澶嶏紱repeat-y 涓虹旱鍚戦噸澶嶏紱no-repteat 涓轰笉閲嶅銆傚笇鏈涘...
绛旓細鑳屾櫙棰滆壊杩欎釜鏄敤鏉ヨ缃儗鏅鑹茬殑锛屽睍鐜版晥鏋滃涓嬶細
绛旓細姣斿杩欐槸鍗曠嫭鐨CSS鏂囦欢锛01.css /*鑳屾櫙鍥剧墖*/ body{ background:url(...) no-repeat left top;} 鍦╤tml鏂囦欢閲岋細 鑳屾櫙鍥剧墖 涓讳綋鍐呭
绛旓細鑳屾櫙棰滆壊 杩欎釜鏄敤鏉ヨ缃儗鏅鑹茬殑锛屽睍鐜版晥鏋滃涓嬶細鍙互鍙﹀璁剧疆杩欎釜瀹藉害澶у皬锛岀暀涓浜涚┖浣欑殑鍦版柟浼氭洿濂界湅 鏍囩鏄笉鑳借缃鑳屾櫙鍥剧墖鐨勶紝杩欎釜鏄敤鏉ヨ缃枃瀛楃殑鏍峰紡鐨勩傚彲浠ュ湪span鏍囩涔嬪墠娣诲姞涓涓 浠ｇ爜鍜屾晥鏋滃涓嬶細
绛旓細1銆佸彲浠ュ悓鏃朵娇鐢ㄨ儗鏅壊鍜鑳屾櫙鍥锛屽叿浣撴柟娉曢鍏堢敤hbuilder鏂板缓涓涓猦tml鏂囦欢锛屽垱寤轰竴涓猟iv锛屽苟缁檇iv涓涓猚lass灞炴э紝鍦ㄤ笂鏂圭殑style涓缃甤lass鐨勬牱寮忥紝杩欓噷鎶奷iv鐨勫搴﹀拰楂樺害璁剧疆澶х偣锛屾柟渚胯瀵熸晥鏋滐細2銆佺劧鍚庝娇鐢╞ackground璁剧疆灞炴э紱background鏄竴涓鍚堝睘鎬э紝鏈変簲涓弬鏁帮紝绗竴涓槸鑳屾櫙棰滆壊锛岀浜屼釜鏄鍥剧墖锛...
绛旓細1銆佹墦寮鎿嶄綔杞欢杩欓噷鐢―W锛屽畾涔変竴涓猚ss鏍峰紡锛屽涓嬪浘 2銆侀鍏堢湅涓嬶紝鑳屾櫙鍥鏁堟灉锛屽涓嬪浘鎵绀猴細3銆佸湪div涓娣诲姞涓涓猧mg锛岃緭鍏ヤ互涓嬩唬鐮併傚涓嬪浘鎵绀猴細4銆佸嵆鍙疄鐜板棰橈紝css鍥剧墖涔嬩笂鍐嶅姞涓寮犲浘鐗囷細濡備笅鍥炬墍绀猴細
绛旓細濡備綍鍦╤tml涓娣诲姞鑳屾櫙鍥剧墖 鍦╤tml涓粰div娣诲姞鑳屾櫙鍥剧墖涓昏鏈変互涓嬪嚑绉嶆柟娉:绗竴涓:缁css鏂囦欢娣诲姞鑳屾櫙鍥剧墖:浣跨敤url(../images/鑳屾櫙鍥剧墖2.jpg)鍦╟ss涓紝鐢变簬html鏂囦欢鍜宑ss鏂囦欢鐨勭浉瀵逛綅缃笉鍚岋紝鍐呰仈css鍜屽鍏ss涓紩鍏ュ浘鐗囩殑璺緞浼氭湁鎵涓嶅悓銆傚鍥炬墍绀:绗簩:浠嬬粛:濡傚浘鎵绀:绗笁绉:鍦╠iv涓娣诲姞鍥剧墖銆俰mg ...
绛旓細鑳屾櫙鑹茶缃畬鎴愩7 /9 鍚屾牱锛屼篃鍙互娣诲姞鏈湴鍥剧墖浣滀负鑳屾櫙锛屾壘鍒板浘鍍忔枃浠躲8 /9 鑳屾櫙鍥惧儚璁剧疆瀹屾瘯銆9 /9 鍙﹀锛岃缃儗鏅浘鍍忎笅闈竴鍏辨湁鍥涗釜閫夐」锛歯o-repeat銆乺epeat銆乺epeat-x銆乺epeat-y锛屽垎鍒负閲嶅銆佷笉閲嶅銆侀噸澶嶄簬姘村钩闈侀噸澶嶄簬鍨傜洿闈傚嵆鏍规嵁瀹為檯鎯呭喌锛岄夋嫨閫傚悎鐨勯夐」銆俤w21濡備綍娣诲姞css鏍峰紡锛熺湅...
