css怎么给div加背景图片 用css给div盒子加了背景图片后，边框怎么去
css\u5982\u4f55\u4f7fdiv\u80cc\u666f\u56fe\u7247\u586b\u5145css\u4f7fdiv\u80cc\u666f\u56fe\u7247\u586b\u5145\u7684\u5177\u4f53\u64cd\u4f5c\u6b65\u9aa4\u5982\u4e0b\uff1a
1\u3001\u6211\u4eec\u9996\u5148\u6253\u5f00\u524d\u7aef\u5f00\u53d1\u5de5\u5177\uff0c\u65b0\u5efa\u4e00\u4e2ahtml\u4ee3\u7801\u9875\u9762\u3002
2\u3001\u5728html\u4ee3\u7801\u9875\u9762\u4e0a\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u7684div\u6807\u7b7e\uff0c\u7136\u540e\u7ed9\u8fd9\u4e2a\u6807\u7b7e\u6dfb\u52a0\u4e0aclass = "bg-img"\u3002
3\u3001\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\uff0c\u521b\u5efastyle\u6807\u7b7e\uff0c\u7136\u540e\u5728\u6807\u7b7e\u91cc\u9762\u5bf9\u7c7b\u4e3abg-img\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\u3001\u56fe\u7247\u4e0d\u91cd\u590d\u3001\u5bbd\u3001\u9ad8\u7684\u6837\u5f0f\u3002
4\u3001\u4fdd\u5b58html\u4ee3\u7801\uff0c\u4f7f\u7528\u6d4f\u89c8\u5668\u6253\u5f00\uff0c\u8fd9\u4e2a\u65f6\u5019\u4f1a\u53d1\u73b0\u6d4f\u89c8\u5668\u4e0a\u7684\u80cc\u666f\u56fe\u7247\u663e\u793a\u5728\u5de6\u4e0a\u89d2\u3002
5\u3001\u56de\u5230html\u4ee3\u7801\u9875\u9762\uff0c\u5728bg-img\u7c7b\u91cc\u6dfb\u52a0background-position: center\u7684\u5c5e\u6027\u3002
6\u3001\u4fdd\u5b58html\u4ee3\u7801\u540e\u91cd\u65b0\u5237\u65b0\u6d4f\u89c8\u5668\uff0c\u8fd9\u4e2a\u65f6\u5019\u4f1a\u53d1\u73b0\u6d4f\u89c8\u5668\u4e0a\u7684\u80cc\u666f\u56fe\u7247\u5df2\u7ecf\u81ea\u52a8\u5c45\u4e2d\u4e86\u3002
div\u672c\u8eab\u9ed8\u8ba4\u662f\u6ca1\u6709\u8fb9\u6846\u7684\uff0c\u4f60\u8fd9\u662f\u80cc\u666f\u56fe\u7247\u81ea\u5e26\u7684\u8fb9\u6846\uff08\u6216\u8005\u8bf4\u8fd9\u8fb9\u6846\u662f\u56fe\u7247\u7684\u7ec4\u6210\u90e8\u5206\uff09\u5427\uff1f\u90a3\u4f60\u5e94\u8be5\u7528\u56fe\u7247\u7f16\u8f91\u8f6f\u4ef6\uff08\u6bd4\u5982PS\uff09\u628a\u8fb9\u6846\u53bb\u6389\u624d\u884c\u3002
通过css：background-image语句设置背景。
background-image 属性会在元素的背景中设置一个图像。根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。初始背景图像（原图像）根据 background-position 属性的值放置。
（1）相对的文件位置：
（2）测试代码：
测试效果：
扩展资料：
background-image 属性为元素元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
参考资料：百度百科--CSS background-image
1、CSS背景属性语法结构
设置颜色
div{background:#000}设置背景图片
div{background:url(图片路径) no-repeat 4px 5px}例如
div.box1{background:url(logo.gif)}
div.box2{background:url(logo.gif) no-repeat 10px center}
div.box3{background:url(logo.gif) repeat-x 0 30px}
div.box4{background:url(logo.gif) repeat-y center}
selector{background-image:url(图片地址路径)}
绛旓細閫氳繃css锛歜ackground-image璇彞璁剧疆鑳屾櫙銆俠ackground-image 灞炴т細鍦ㄥ厓绱犵殑鑳屾櫙涓缃竴涓浘鍍忋傛牴鎹 background-repeat 灞炴х殑鍊硷紝鍥惧儚鍙互鏃犻檺骞抽摵銆佹部鐫鏌愪釜杞达紙x 杞存垨 y 杞达級骞抽摵锛屾垨鑰呮牴鏈笉骞抽摵銆傚垵濮嬭儗鏅浘鍍忥紙鍘熷浘鍍忥級鏍规嵁 background-position 灞炴х殑鍊兼斁缃傦紙1锛夌浉瀵圭殑鏂囦欢浣嶇疆锛氾紙2锛夋祴璇曚唬鐮...
绛旓細1銆佹垜浠鍏堟墦寮鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰銆2銆佸湪html浠ｇ爜椤甸潰涓婂垱寤轰竴涓敤浜庤缃儗鏅鑹茬殑div鏍囩锛岀劧鍚庣粰杩欎釜鏍囩娣诲姞涓奵lass = "bg-img"銆3銆佽缃鑳屾櫙鍥剧墖锛屽垱寤簊tyle鏍囩锛岀劧鍚庡湪鏍囩閲岄潰瀵圭被涓bg-img璁剧疆鑳屾櫙鍥剧墖銆佸浘鐗囦笉閲嶅銆佸銆侀珮鐨勬牱寮忋4銆佷繚瀛榟tml浠ｇ爜锛屼娇鐢ㄦ祻瑙堝櫒鎵撳紑锛岃繖涓椂鍊...
绛旓細绗竴涓:缁檆ss鏂囦欢娣诲姞鑳屾櫙鍥剧墖:浣跨敤url(../images/鑳屾櫙鍥剧墖2.jpg)鍦╟ss涓锛岀敱浜巋tml鏂囦欢鍜宑ss鏂囦欢鐨勭浉瀵逛綅缃笉鍚岋紝鍐呰仈css鍜屽鍏ss涓紩鍏ュ浘鐗囩殑璺緞浼氭湁鎵涓嶅悓銆傚鍥炬墍绀:绗簩:浠嬬粛:濡傚浘鎵绀:绗笁绉:鍦╠iv涓坊鍔犲浘鐗囥俰mg src=../images/鑳屾櫙鍥1.jpgalt=style=width:100%;height:100%>韬珮:10...
绛旓細鍦ㄤ笂鍥句腑锛屾湁鍑犱釜div锛屾垜浠互id涓篸1鐨刣iv涓轰緥銆傚垱寤轰簡div鍚庯紝鎴戜滑闇瑕涓篸iv娣诲姞鏍峰紡銆傛坊鍔犳牱寮忔垜浠叏閮ㄥ啓鍦CSS鏂囦欢涓紝骞跺湪html椤甸潰涓紩鐢ㄣ傚叿浣撶殑鏍峰紡鍏ヤ笅鍥炬墍绀猴細鎴戜滑棣栧厛浣跨敤浜嗕竴寮犱负regist.png鐨鍥剧墖浣滀负鑳屾櫙锛屽皢鍏惰缃负鑳屾櫙銆傚皢鍥剧墖浣滀负鑳屾櫙鐨勫叿浣撲唬鐮佸叆涓嬪浘鎵绀恒傚鏋滄垜浠殑鑳屾櫙灏忎簬鎴戜滑鐨勯〉闈紝...
绛旓細1銆俲Query璁剧疆css鏍峰紡 div宸﹀～鍏 3.鐢╟ss()璁剧疆鏍峰紡 (div棰滆壊 4.璁剧疆澶氱鏍峰紡銆(div鑳屾櫙鑹瞹);varcss={ 鑳屾櫙鑹:#EEE,韬珮:500鍍忕礌,淇濊瘉閲:10px2px5px (div p鏍囩鎬庝箞浣跨敤锛焢鏍囩鐨勪娇鐢ㄦ柟娉曪細1銆乸鏍囩鍙互閫氳繃璁剧疆class鎴杋d鏉ヨ幏鍙栨牱寮忥紱2銆乸鏍囩涔熷彲浠ョ洿鎺ラ氳繃鍐呰仈寮忕殑鏂规硶鑾峰彇鏍峰紡銆俻鏍囩绉颁负...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛div{height: 80px; background: url(small3.png)}div:hover{background: url(small2.png)}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禿iv鏄剧ず鐨鑳屾櫙鍥剧墖鏄痵mall3.png銆4銆佸皢榧犳爣绉诲叆div锛屾鏃...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛歜ody {background: url(image.jpg) no-repeat;background-size: 100%}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔熻瀹鑳屾櫙鍥剧墖绛夋瘮渚嬫斁缂╁埌...
绛旓細<head> <style> .content{background:url(鍥剧墖鍦板潃) no-repeat scroll top center 棰滆壊;} 杩欎釜鏍峰紡灏辨槸鍔犺儗鏅浘鐗锛屽悗闈㈡帴鐨勫簳鑹层</style> </head> <body> <div class="content"> 閲岄潰鏀惧唴瀹 <.div> </body>
绛旓細http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>liuxing test</title><style type="text/css"> .divbgpic{ background-image:url('jquery/jquery-ui-1.9.1.custom/jquery-ui-1.9.1.custom/css/base/images...
绛旓細濡備綍鍦―W涓坊鍔燙SS鏍峰紡 1銆傞鍏堝惎鍔―W杞欢锛屽垱寤轰竴涓柊鏂囨。锛岀劧鍚庨夋嫨[锛汬TML]-[XHTML1.0]锛岀劧鍚庣偣鍑籟鍒涘缓]銆2.鍗曞嚮Create鍚庯紝DW灏嗕负瀹冨垱寤轰竴涓狧TML鏂囦欢銆傛垜浠皢鍦╞ody鏍囩涓坊鍔犱竴涓div鏍囩缁勩3.鐒跺悗锛屽湪div鏍囪涓緭鍏ヤ笅鍥句腑鐨勪唬鐮併俿tyle鏄寚CSS鏍峰紡鐩存帴娣诲姞鍒拌繖涓猟iv涓紝鎵浠ユ槸鎴愬姛鐨勩傛牱寮忚鐢...
