CSS添加背景图片
css代码添加背景图片：
1．背景颜色：background-color
语法：{background-color:数值}
注意：在html当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。
表格背影颜色：style="background-color:red"
2．背景图片：background-image
语法：{background-image: url(url)|none}
3．背景重复：background-repeat
语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用：背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。
说明：参数取值范围：
·inherit 继承
·no-repeat 不重复平铺背景图片
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺
注意：如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4．背景固定：background-attachment
语法：{background-attachment:fixed|scroll}
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动
·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
注意：背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。
5．背景定位：background-position
语法：{background-position:数值|top|bottom|left|right|center}
作用：背景定位用于控制背景图片在网页中显示的位置。
·带长度单位的数字参数
·top：相对前景对象顶对齐
·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:背景颜色|背景图象|背景重复|背景附件|背景位置}
作用：背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明。
扩展资料：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
参考资料来源：百度百科：css
绛旓細2锛鑳屾櫙鍥剧墖锛歜ackground-image 璇硶锛歿background-image: url(url)|none} 3锛庤儗鏅噸澶嶏細background-repeat 璇硶锛歿background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 浣滅敤锛氳儗鏅浘鐗囬噸澶嶆帶鍒剁殑鏄儗鏅浘鐗囧钩閾轰笌鍚︼紝涔熷氨鏄锛岀粨鍚堣儗鏅畾浣嶇殑鎺у埗鍙互鍦ㄧ綉椤典笂鐨勬煇澶勫崟鐙樉绀轰竴骞呰儗鏅浘鐗囥...
绛旓細閫氳繃css锛歜ackground-image璇彞璁剧疆鑳屾櫙銆俠ackground-image 灞炴т細鍦ㄥ厓绱犵殑鑳屾櫙涓缃竴涓浘鍍忋傛牴鎹 background-repeat 灞炴х殑鍊硷紝鍥惧儚鍙互鏃犻檺骞抽摵銆佹部鐫鏌愪釜杞达紙x 杞存垨 y 杞达級骞抽摵锛屾垨鑰呮牴鏈笉骞抽摵銆傚垵濮嬭儗鏅浘鍍忥紙鍘熷浘鍍忥級鏍规嵁 background-position 灞炴х殑鍊兼斁缃傦紙1锛夌浉瀵圭殑鏂囦欢浣嶇疆锛氾紙2锛夋祴璇曚唬鐮...
绛旓細鍥涚鏂规硶锛氶渶瑕佹敞鎰忕殑鏄紝濡傛灉p涓病鏈夊唴瀹癸紝鍒欓氳繃璁剧疆楂樺鏉ヨ缃祴璇曟煡鐪鑳屾櫙鍥剧墖绗竴绉嶏細p>/p>绗簩绉嶏細head閮ㄥ垎寮曞叆style>.p{background:url(images/2.jpg);height:200;width:200;}/style>绗笁绉嶏細鍦╤ead閮ㄥ垎寮曞叆澶栭儴鏍峰紡琛╨inkrel=stylesheettype=text/csshref=css/style.css/>骞跺湪style琛ㄤ腑鍐...
绛旓細鍦ㄤ笂鍥句腑锛屾湁鍑犱釜div锛屾垜浠互id涓篸1鐨刣iv涓轰緥銆傚垱寤轰簡div鍚庯紝鎴戜滑闇瑕佷负div娣诲姞鏍峰紡銆傛坊鍔犳牱寮忔垜浠叏閮ㄥ啓鍦CSS鏂囦欢涓紝骞跺湪html椤甸潰涓紩鐢ㄣ傚叿浣撶殑鏍峰紡鍏ヤ笅鍥炬墍绀猴細鎴戜滑棣栧厛浣跨敤浜嗕竴寮犱负regist.png鐨鍥剧墖浣滀负鑳屾櫙锛屽皢鍏惰缃负鑳屾櫙銆傚皢鍥剧墖浣滀负鑳屾櫙鐨勫叿浣撲唬鐮佸叆涓嬪浘鎵绀恒傚鏋滄垜浠殑鑳屾櫙灏忎簬鎴戜滑鐨勯〉闈紝...
绛旓細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鏍囩鑳屾櫙鍥剧墖涓婃柟锛屾鏃惰儗鏅...
绛旓細css浣縟iv鑳屾櫙鍥剧墖濉厖鐨勫叿浣撴搷浣滄楠ゅ涓嬶細1銆佹垜浠鍏堟墦寮鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰銆2銆佸湪html浠ｇ爜椤甸潰涓婂垱寤轰竴涓敤浜庤缃儗鏅鑹茬殑div鏍囩锛岀劧鍚庣粰杩欎釜鏍囩娣诲姞涓奵lass = "bg-img"銆3銆佽缃儗鏅浘鐗囷紝鍒涘缓style鏍囩锛岀劧鍚庡湪鏍囩閲岄潰瀵圭被涓篵g-img璁剧疆鑳屾櫙鍥剧墖銆佸浘鐗囦笉閲嶅銆佸銆侀珮鐨勬牱寮忋4...
绛旓細鍙互鍦CSS閲岄潰鐢╞ackground-image:url(浣犵殑鍥剧墖鍦板潃)銆傝繖鏍锋潵鍔犲叆鍥剧墖锛屽睍鐜板埌缃戦〉涓 bgimg { background: #333 url(鍥剧墖璺緞) center center no-repeat;} 绗竴涓弬鏁帮紝鍥剧墖搴曞眰鐨鑳屾櫙棰滆壊锛岀浜屼釜鍙傛暟锛屽浘鐗囪矾寰勶紝绗笁涓弬鏁帮紝鍥剧墖涓婁笅鐨勭浉瀵逛綅缃紙鍏朵粬鍙傛暟left,right锛夛紝绗洓涓弬鏁帮紝鍥剧墖宸﹀彸鐨...
绛旓細鍦 CSS 涓紩鐢ㄦ湰鍦鑳屾櫙鍥剧墖鍙互浣跨敤 background-image 灞炴э紝骞跺皢鍥剧墖璺緞鎸囧畾涓烘湰鍦版枃浠惰矾寰勩備緥濡傦細body { background-image: url('./images/bg.jpg');} 鍏朵腑 ./images/bg.jpg 鏄浘鐗囩殑鏈湴鏂囦欢璺緞锛屽彲浠ユ牴鎹疄闄呮儏鍐垫浛鎹负鍏朵粬璺緞銆傝娉ㄦ剰锛屽鏋滄偍鐨 CSS 鏂囦欢鍜屽浘鍍忔枃浠朵笉鍦ㄥ悓涓鐩綍涓紝鍒...
绛旓細1銆侀鍏堝湪鐢佃剳绔壘鍒癉w杞欢锛岃繘琛屾墦寮鎿嶄綔锛岀劧鍚庢柊寤轰竴涓猦tml鏂囦欢銆2銆佹柊寤烘枃浠跺畬鎴愪箣鍚庯紝鍐欏叆涓涓猟iv浠ｇ爜鎿嶄綔锛屽鍥炬墍绀恒3銆佸啓鍏iv浠ｇ爜涔嬪悗锛屽紩鍏ヤ竴涓猚ss鏍峰紡锛屽鍥句唬鐮佹搷浣滄墍绀恒4銆佸紩鍏ユ牱寮忎唬鐮佷箣鍚庯紝鎵撳紑寮曞叆鐨刢ss.鏂囦欢锛屽鍥炬墍绀恒5銆佸湪鏂板紩鍏ョ殑css鏂囦欢涓紝鍐欏叆css鑳屾櫙鍥剧墖浠ｇ爜鍗冲彲锛屽鍥炬墍绀恒
绛旓細2銆佺浜屾锛屾柊寤哄畬涓涓柊鐨刪tml鏂囦欢鍚庯紝鍦╥ndex.html鐨勬爣绛句腑锛岃緭鍏ュ涓嬫墍绀虹殑CSS浠ｇ爜锛屽叿浣撹涓嬮潰鐨勫浘绀猴紝杩涘叆鍒颁笅涓姝ラ涓3銆佺涓夋锛岃緭鍏ュ畬CSS浠ｇ爜涔嬪悗锛屾帴涓嬫潵杩愯index.html椤甸潰銆 鍙互鍙戠幇锛屾湰鍦板浘鐗囬氳繃鑳屾櫙鍥剧墖涓殑鏈湴璺緞鎴愬姛璋冪敤涓轰簡鑳屾櫙鍥剧墖锛屽叿浣撹涓嬮潰鐨勫浘绀恒傝繖鏍凤紝鍥剧墖灏辨垚鍔熷姞鍏ヤ簡銆
