css背景图片代码 CSS添加背景图片
\u8fd9\u4e2aCSS\u80cc\u666f\u4ee3\u7801\uff0c\u600e\u4e48\u6539\u4e00\u4e0b\u5c31\u53ef\u4ee5\u628a\u80cc\u666f\u56fe\u7247\u5e73\u94fa\u5462\uff1f\u6e90\u4ee3\u7801\u6539\u4e3a\uff1a
body {background-color:#FFFFFF;background-image:url(\u80cc\u666f\u56fe\u7247\u5730\u5740);background-repeat:repeat;background-position:center 0;}
\u4e5f\u53ef\u4ee5\u7b80\u5316\u4e3a\uff1a
body {background:#FFF url(\u80cc\u666f\u56fe\u7247\u5730\u5740) repeat center 0;}
\u6c34\u5e73\u5e73\u94fa\uff1a
body {background-color:#FFFFFF;background-image:url(\u80cc\u666f\u56fe\u7247\u5730\u5740);background-repeat:repeat-x;background-position:center 0;}
\u5782\u76f4\u5e73\u94fa\uff1a
body {background-color:#FFFFFF;background-image:url(\u80cc\u666f\u56fe\u7247\u5730\u5740);background-repeat:repeat-x;background-position:center 0;}
\u5e0c\u671b\u5bf9\u4f60\u6709\u5e2e\u52a9\u3002
css\u4ee3\u7801\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\uff1a
1\uff0e\u80cc\u666f\u989c\u8272\uff1abackground-color
\u8bed\u6cd5\uff1a{background-color:\u6570\u503c}
\u6ce8\u610f\uff1a\u5728html\u5f53\u4e2d\uff0c\u8981\u4e3a\u67d0\u4e2a\u5bf9\u8c61\u52a0\u4e0a\u80cc\u666f\u8272\u53ea\u6709\u4e00\u79cd\u529e\u6cd5\uff0c\u90a3\u5c31\u662f\u5148\u505a\u4e00\u4e2a\u8868\u683c\uff0c\u5728\u8868\u683c\u4e2d\u8bbe\u7f6e\u5b8c\u80cc\u666f\u8272\uff0c\u518d\u628a\u5bf9\u8c61\u653e\u8fdb\u5355\u5143\u683c\u3002\u8fd9\u6837\u505a\u6bd4\u8f83\u9ebb\u70e6\uff0c\u4e0d\u4f46\u4ee3\u7801\u8f83\u591a\uff0c\u8fd8\u8981\u4e3a\u8868\u683c\u7684\u5927\u5c0f\u548c\u5b9a\u4f4d\u4f24\u4e9b\u8111\u7b4b\u3002
\u8868\u683c\u80cc\u5f71\u989c\u8272\uff1astyle="background-color:red"
2\uff0e\u80cc\u666f\u56fe\u7247\uff1abackground-image
\u8bed\u6cd5\uff1a{background-image: url(url)|none}
3\uff0e\u80cc\u666f\u91cd\u590d\uff1abackground-repeat
\u8bed\u6cd5\uff1a{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
\u4f5c\u7528\uff1a\u80cc\u666f\u56fe\u7247\u91cd\u590d\u63a7\u5236\u7684\u662f\u80cc\u666f\u56fe\u7247\u5e73\u94fa\u4e0e\u5426\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c\u7ed3\u5408\u80cc\u666f\u5b9a\u4f4d\u7684\u63a7\u5236\u53ef\u4ee5\u5728\u7f51\u9875\u4e0a\u7684\u67d0\u5904\u5355\u72ec\u663e\u793a\u4e00\u5e45\u80cc\u666f\u56fe\u7247\u3002
\u8bf4\u660e\uff1a\u53c2\u6570\u53d6\u503c\u8303\u56f4\uff1a
\u00b7inherit \u7ee7\u627f
\u00b7no-repeat \u4e0d\u91cd\u590d\u5e73\u94fa\u80cc\u666f\u56fe\u7247
\u00b7repeat-x \u4f7f\u56fe\u7247\u53ea\u5728\u6c34\u5e73\u65b9\u5411\u4e0a\u5e73\u94fa
\u00b7repeat-y \u4f7f\u56fe\u7247\u53ea\u5728\u5782\u76f4\u65b9\u5411\u4e0a\u5e73\u94fa
\u6ce8\u610f\uff1a\u5982\u679c\u4e0d\u6307\u5b9a\u80cc\u666f\u56fe\u7247\u91cd\u590d\u5c5e\u6027\uff0c\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7684\u662f\u80cc\u666f\u56fe\u7247\u5411\u6c34\u5e73\u3001\u5782\u76f4\u4e24\u4e2a\u65b9\u5411\u4e0a\u5e73\u94fa\u3002
4\uff0e\u80cc\u666f\u56fa\u5b9a\uff1abackground-attachment
\u8bed\u6cd5\uff1a{background-attachment:fixed|scroll}
\u00b7fixed\uff1a\u7f51\u9875\u6eda\u52a8\u65f6\uff0c\u80cc\u666f\u56fe\u7247\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u7684\u7a97\u53e3\u800c\u8a00\uff0c\u56fa\u5b9a\u4e0d\u52a8
\u00b7scroll\uff1a\u7f51\u9875\u6eda\u52a8\u65f6\uff0c\u80cc\u666f\u56fe\u7247\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u7684\u7a97\u53e3\u800c\u8a00\uff0c\u4e00\u8d77\u6eda\u52a8
\u6ce8\u610f\uff1a\u80cc\u666f\u56fe\u7247\u56fa\u5b9a\u63a7\u5236\u80cc\u666f\u56fe\u7247\u662f\u5426\u968f\u7f51\u9875\u7684\u6eda\u52a8\u800c\u6eda\u52a8\u3002\u5982\u679c\u4e0d\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\u56fa\u5b9a\u5c5e\u6027\uff0c\u6d4f\u89c8\u5668\u9ed8\u8ba4\u80cc\u666f\u56fe\u7247\u968f\u7f51\u9875\u7684\u6eda\u52a8\u800c\u6eda\u52a8\u3002\u4e3a\u4e86\u907f\u514d\u8fc7\u4e8e\u82b1\u54e8\u7684\u80cc\u666f\u56fe\u7247\u5728\u6eda\u52a8\u65f6\u4f24\u5bb3\u6d4f\u89c8\u8005\u7684\u89c6\u529b\uff0c\u6240\u4ee5\u53ef\u4ee5\u89e3\u9664\u80cc\u666f\u56fe\u7247\u548c\u6587\u5b57\u5185\u5bb9\u7684\u6346\u7ed1\uff0c\u8be5\u4e3a\u548c\u6d4f\u89c8\u5668\u7a97\u53e3\u6346\u7ed1\u3002
5\uff0e\u80cc\u666f\u5b9a\u4f4d\uff1abackground-position
\u8bed\u6cd5\uff1a{background-position:\u6570\u503c|top|bottom|left|right|center}
\u4f5c\u7528\uff1a\u80cc\u666f\u5b9a\u4f4d\u7528\u4e8e\u63a7\u5236\u80cc\u666f\u56fe\u7247\u5728\u7f51\u9875\u4e2d\u663e\u793a\u7684\u4f4d\u7f6e\u3002
\u00b7\u5e26\u957f\u5ea6\u5355\u4f4d\u7684\u6570\u5b57\u53c2\u6570
\u00b7top\uff1a\u76f8\u5bf9\u524d\u666f\u5bf9\u8c61\u9876\u5bf9\u9f50
\u00b7right\uff1a\u76f8\u5bf9\u524d\u666f\u5bf9\u8c61\u53f3\u5bf9\u9f50
\u00b7center\uff1a\u76f8\u5bf9\u524d\u666f\u5bf9\u8c61\u4e2d\u5fc3\u5bf9\u9f50
\u00b7\u6bd4\u4f8b\u5173\u7cfb
\u5173\u952e\u5b57\u89e3\u91ca\u5982\u4e0b:
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%
\u6ce8\u610f\uff1a\u53c2\u6570\u4e2d\u7684center\u5982\u679c\u7528\u4e8e\u53e6\u5916\u4e00\u4e2a\u53c2\u6570\u7684\u524d\u9762\uff0c\u8868\u793a\u6c34\u5e73\u5c45\u4e2d\uff1b\u5982\u679c\u7528\u4e8e\u53e6\u5916\u4e00\u4e2a\u53c2\u6570\u7684\u540e\u9762\uff0c\u8868\u793a\u5782\u76f4\u5c45\u4e2d\u3002
6. \u80cc\u666f\u6837\u5f0f\uff1abackground
\u8bed\u6cd5\uff1a{background:\u80cc\u666f\u989c\u8272|\u80cc\u666f\u56fe\u8c61|\u80cc\u666f\u91cd\u590d|\u80cc\u666f\u9644\u4ef6|\u80cc\u666f\u4f4d\u7f6e}
\u4f5c\u7528\uff1a\u80cc\u666f\u5c5e\u6027\u662f\u4e00\u4e2a\u66f4\u660e\u786e\u7684\u80cc\u666f\u2014\u5173\u7cfb\u5c5e\u6027\u7684\u7565\u5199\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u80cc\u666f\u7684\u58f0\u660e\u3002
\u6269\u5c55\u8d44\u6599\uff1a
\u5c42\u53e0\u6837\u5f0f\u8868(\u82f1\u6587\u5168\u79f0\uff1aCascading Style Sheets)\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002CSS\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
1990\u5e74\uff0cTim Berners-Lee\u548cRobert Cailliau\u5171\u540c\u53d1\u660e\u4e86Web\u30021994\u5e74\uff0cWeb\u771f\u6b63\u8d70\u51fa\u5b9e\u9a8c\u5ba4\u3002
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1a\u767e\u5ea6\u767e\u79d1\uff1acss
1、首先在电脑端找到Dw软件，进行打开操作，然后新建一个html文件。
2、新建文件完成之后，写入一个div代码操作，如图所示。
3、写入div代码之后，引入一个css样式，如图代码操作所示。
4、引入样式代码之后，打开引入的css.文件，如图所示。
5、在新引入的css文件中，写入css背景图片代码即可，如图所示。
要写css背景图片代码可以参考以下操作方法：
1、打开系统中的记事本，输入代码
<html>
<body>
</body>
</html>
2、点击标签<html>后面，输入head及style标签
<head>
<style type="text/css">
</style>
</head>
3、点击style标签之间，定义网页背景为图片，body {background-image:url(d:/bg.gif);}其中的冒号和分号一定不能缺少，否则会出错。
4、将文件“另存为”文件名可以随便取，保存格式一定要是html格式，存好后打开网页文件预览。
5、想让图片在网页中不重复显示的话，可以在style标签body中添加代码 background-repeat: no-repeat
6、想让图片在网页中沿纵向重复显示的话，可以修改上面代码为background-repeat: repeat-y
7、想让图片在网页中沿横向重复显示的话，可以修改上面代码为background-repeat: repeat-x 。如果不能解决问题，建议重复上述步骤再操作一遍。
写css背景图片代码可以参考以下：
<html>
<head>
<style type="text/css">
body {background-image:url(abc.jpg);}
</style>
</head>
<body>
</body>
</html>
扩展资料：
1、背景图片语法：{background-image: url(url)|none}
2、背景固定语法：{background-attachment:fixed|scroll}
3、背景重复语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4、背景定位语法：{background-position:数值|top|bottom|left|right|center}
参考资料来源：百度百科-CSS语法
代码如下：
<html>
<head>
<style type="text/css">
body {background-image:url(abc.jpg);}
</style>
</head>
<body>
</body>
</html>
扩展资料
1.背景图片：background-image
语法：{background-image: url(url)|none}
2．背景重复：background-repeat
语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
3．背景固定：background-attachment
语法：{background-attachment:fixed|scroll}
4．背景定位：background-position
语法：{background-position:数值|top|bottom|left|right|center}
参考资料来源：百度百科-CSS语法
参考资料来源：百度百科-CSS background-image
背景色设置有时候局限性比较大，很多网站都采用图片来设置背景图片，可以做到让网页更美观。
设置背景图片的CSS属性是像这样的：
background-image: url(./images/background.jpg);
url是一个CSS函数，里面参数是图片的目录路径。
一般采用相对目录路径，也就是假设index.html存放在哪一个目录下，则在这个目录下创建一个images目录，将background.jpg文件放到images目录里面去。
修改css文件的body的样式，增加background-image，同时删除bigtitle的width属性，因为div默认就是宽度为100%，为了防止该属性对背景图片的干扰，所以删除掉不必要的属性。
css代码如下：
背景图像 - 水准或垂直平铺
默认情况下background-image内容会在页面的水准或者垂直方向平铺。
图像只在水准方向平铺（repeat-x）
背景图像 - 设置定位与不平铺
让背景图像不影响文本的排版如果你不想让图像平铺，你可以使用background-repeat内容：
以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。可以利用background-position内容改变图像在背景中的位置：
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歭i {height: 50px;background: url(small3.png)} li:hover {background: url(small2.png)} 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵樉绀哄嚭浜鑳屾櫙鍥剧墖銆4銆佸皢榧犳爣绉诲姩鍒發i鏍囩鑳屾櫙鍥剧墖涓婃柟锛屾鏃惰儗鏅...
绛旓細鑳屾櫙棰滆壊 杩欎釜鏄敤鏉ヨ缃儗鏅鑹茬殑锛屽睍鐜版晥鏋滃涓嬶細鍙互鍙﹀璁剧疆杩欎釜瀹藉害澶у皬锛岀暀涓浜涚┖浣欑殑鍦版柟浼氭洿濂界湅 鏍囩鏄笉鑳借缃鑳屾櫙鍥剧墖鐨勶紝杩欎釜鏄敤鏉ヨ缃枃瀛楃殑鏍峰紡鐨勩傚彲浠ュ湪span鏍囩涔嬪墠娣诲姞涓涓 浠ｇ爜鍜屾晥鏋滃涓嬶細
绛旓細1銆侀鍏堟墦寮鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰銆2銆佸湪html浠ｇ爜椤甸潰涓婂垱寤轰竴涓敤浜庤缃儗鏅鑹茬殑div鏍囩锛岀劧鍚庣粰杩欎釜鏍囩娣诲姞涓奵lass = "bg-img"銆3銆佽缃鑳屾櫙鍥剧墖銆傚垱寤簊tyle鏍囩锛岀劧鍚庡湪鏍囩閲岄潰瀵圭被涓篵g-img璁剧疆鑳屾櫙鍥剧墖銆佸浘鐗囦笉閲嶅銆佸銆侀珮鐨勬牱寮忋4銆佷繚瀛榟tml浠ｇ爜锛屼娇鐢ㄦ祻瑙堝櫒鎵撳紑锛岃繖涓椂鍊欎細...
绛旓細鍗曞紶鍥剧墖鐨勮儗鏅ぇ灏忓彲浠ヤ娇鐢ㄤ互涓嬩笁绉嶆柟娉曚腑鐨勪竴绉嶆潵瑙勫畾锛氬綋閫氳繃瀹藉害鍜岄珮搴﹀兼潵璁惧畾灏哄鏃讹紝浣犲彲浠ユ彁渚涗竴鎴栬呬袱涓暟鍊:姣忎釜鍊煎彲浠ユ槸<length>, 鏄 <percentage>, 鎴栬 [auto] 銆傜ず渚嬶細涓轰簡璁惧畾瓒呰繃涓寮犱互涓婄殑鍥剧墖灏哄鏃讹紝闇瑕佹彁渚涘椤规暟鍊硷紝瀹冧滑閫氳繃閫楀彿鍒嗛殧銆CSS閮ㄥ垎 鑳屾櫙鍥剧墖鍒嗚鲸鐜囦负427*640 鍒嗗埆缁檅ox...
绛旓細body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px} 涓婇潰鐨浠ｇ爜琛ㄧず鑳屾櫙鍥剧墖鐨勫垵濮嬩綅缃窛绂荤綉椤垫渶宸﹂潰20px锛岃窛绂荤綉椤垫渶涓婇潰60px銆傛紨绀虹ず渚 鑳屾櫙灞炴(background):杩欎釜灞炴ф槸璁剧疆鑳屾櫙鐩稿叧灞炴х殑涓绉嶅揩鎹风殑缁煎悎鍐欐硶锛 鍖呮嫭...
绛旓細css浣縟iv鑳屾櫙鍥剧墖濉厖鐨勫叿浣撴搷浣滄楠ゅ涓嬶細1銆佹垜浠鍏堟墦寮鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰銆2銆佸湪html浠ｇ爜椤甸潰涓婂垱寤轰竴涓敤浜庤缃儗鏅鑹茬殑div鏍囩锛岀劧鍚庣粰杩欎釜鏍囩娣诲姞涓奵lass = "bg-img"銆3銆佽缃儗鏅浘鐗囷紝鍒涘缓style鏍囩锛岀劧鍚庡湪鏍囩閲岄潰瀵圭被涓篵g-img璁剧疆鑳屾櫙鍥剧墖銆佸浘鐗囦笉閲嶅銆佸銆侀珮鐨勬牱寮忋4...
绛旓細1.(鏈鏅亶绫) body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center} 璇存槑:浠ヤ笂浠ｇ爜涓虹綉椤鑳屾櫙鍥剧墖鍥哄畾浠ｇ爜锛佺綉椤佃儗鏅浘鐗囧浐瀹氫唬鐮侊紝杩欐牱锛屽綋鍚戜笅鎷夌綉椤垫椂锛岀綉椤佃儗鏅浘鐗囦笉浼氳窡鐫鍚戜笂绉诲姩锛岃揪鍒颁笉鍔ㄧ殑鐩殑锛2.(缁煎悎绫)<Pclass=style6></P></SPAN><SPAN><T...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歜ody{background: url(image.jpg) no-repeat;background-size: 200px 200px; }銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鑳屾櫙鍥剧墖鎴愬姛琚瀹氫负200*20...
绛旓細濡備綍鍦╤tml涓坊鍔鑳屾櫙鍥剧墖 鍦╤tml涓粰div娣诲姞鑳屾櫙鍥剧墖涓昏鏈変互涓嬪嚑绉嶆柟娉:绗竴涓:缁css鏂囦欢娣诲姞鑳屾櫙鍥剧墖:浣跨敤url(../images/鑳屾櫙鍥剧墖2.jpg)鍦╟ss涓紝鐢变簬html鏂囦欢鍜宑ss鏂囦欢鐨勭浉瀵逛綅缃笉鍚岋紝鍐呰仈css鍜屽鍏ss涓紩鍏ュ浘鐗囩殑璺緞浼氭湁鎵涓嶅悓銆傚鍥炬墍绀:绗簩:浠嬬粛:濡傚浘鎵绀:绗笁绉:鍦╠iv涓坊鍔犲浘鐗囥俰mg ...
绛旓細淇濆瓨html浠ｇ爜锛屼娇鐢ㄦ祻瑙堝櫒鎵撳紑锛岃繖涓椂鍊欎細鍙戠幇娴忚鍣ㄤ笂鐨鑳屾櫙鍥剧墖鏄剧ず鍦ㄥ乏涓婅銆傚洖鍒癶tml浠ｇ爜椤甸潰锛屽湪bg-img绫婚噷娣诲姞background-position:center鐨勬牱寮忋備繚瀛榟tml浠ｇ爜鍚庨噸鏂板埛鏂版祻瑙堝櫒锛岃繖涓椂鍊欎細鍙戠幇娴忚鍣ㄤ笂鐨勮儗鏅浘鐗囧凡缁忚嚜鍔ㄥ眳涓簡銆俤w鎬庝箞娣诲姞鑳屾櫙锛1 /9 鎵撳紑DW锛屾坊鍔爌鏍囩锛屽苟璁剧疆绫汇備箣鍚庢柊寤CSS...
