css怎样让背景图片靠右居中
1、首先新建一个html文件，命名为test.html，在test.html文件中，使用div标签创建一个模块，用于测试。
2、在test.html文件中，给div标签添加一个class属性，用于下面样式设置。
3、在css标签内，通过class设置div的样式 ，定义它的宽度为300px，高度为300px，并设置它的背景图片为1.png。
4、在css标签内，再通过将background-position属性设置为“center right”，实现背景图片靠右居中。
5、最后在浏览器打开test.html文件，查看实现的效果。
绛旓細4銆佸湪css鏍囩鍐咃紝鍐嶉氳繃灏哹ackground-position灞炴ц缃负鈥渃enter right鈥濓紝瀹炵幇鑳屾櫙鍥剧墖闈犲彸灞呬腑銆5銆佹渶鍚庡湪娴忚鍣ㄦ墦寮test.html鏂囦欢锛屾煡鐪嬪疄鐜扮殑鏁堟灉銆
绛旓細濡備綍閫氳繃css璁剧疆涓寮犺儗鏅浘鐗囪嚜鍔ㄦ按骞冲瀭鐩村眳涓憿锛鍙互閫氳繃css鎻愪緵鐨刡ackground-position: center杩涜璁剧疆銆傝缃唬鐮侊細.bg-img{ height: 100vh;width: 100%;background-image: url(img/car.jpg);background-repeat: no-repeat;background-position: center;} 鎵撳紑鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰 鍦╤...
绛旓細閫氳繃background鐨刢enter灞炴у疄鐜拌儗鏅浘鐗囧眳涓銆 鎶奀SS鑳屾櫙鍥剧墖background-image鐨剈rl()銆乶o-repeat鍜宑enter center鍐欏湪涓璧枫傛敞鎰忎袱涓猚enter鍒嗗埆浠ｈ〃鑳屾櫙鍥剧墖姘村钩鏂瑰悜灞呬腑鍜屽瀭鐩存柟鍚戝眳涓傞氳繃background-position-x鍜宐ackground-position-y瀹炵幇鑳屾櫙鍥剧墖灞呬腑銆 鍒嗗埆缁檅ackground-position-x鍜宐ackground-position-y...
绛旓細background-position 鍗虫槸瑙勫畾鑳屾櫙鍥剧墖鐨勪綅缃銆傚畠鐨勫煎垎鍒湁浠ヤ笅锛歵op,left,right,bottom 鎵浠ラ渶瑕佹兂鑳屾櫙鍥剧墖灞呬腑鏄剧ず鐨勮瘽锛屽彲浠ヨ繖鏍峰啓锛歮enu_bg{background:url(../images/index_x.jpg) center center;}
绛旓細css浣挎暣涓〉闈㈣儗鏅浘鐗囧眳涓,浣犳槸鍙互缁欎竴涓荤殑div璁剧疆濂戒竴瀹氱殑width鍜宧eight锛岀劧鍚庣粰瀹冩潵璁剧疆鑳屾櫙鍥剧墖锛屽湪閫氳繃margin璁╀粬浠眳涓锛屽悓鏃讹紝background鐨剅epeat鏉ュ钩閾哄疄鐜帮紝鍏蜂綋浠ｇ爜锛#div1{width:960px;height:1200px;border:1px soild #f00;background:url('鍥剧墖鍦板潃')repeat 0px 0px;margin:0 auto;}...
绛旓細}.img{margin:50px auto 70px;} img{margin:50px auto 70px;}杩欏彞灏辨槸鎺у埗鍥剧墖涓婅竟璺50px;涓嬭竟璺70px;宸﹀彸杈硅窛鑷傚簲锛屼篃灏辨槸灞呬腑銆
绛旓細鍙兘鐨勫摝锛屽湪css涓殑鍐欐硶鏄繖鏍风殑锛歜ackground:url(../images/**.jpg) no-repeat center center;灏辫繖鏍锋槸鍙互瀹炵幇灞呬腑鐨勶紝浣犺嚜宸辫瘯涓璇曞惂
绛旓細1銆佸墠绔敤鍒扮殑缂栬緫鍣ㄦ湁寰堝锛屾湰渚嬮氳繃閫夋嫨SublimeText3缂栬緫鍣ㄦ潵瀹炵幇鏂囧瓧灞呬腑鍥剧墖鐨勫埗浣溿傜涓姝ワ紝鎵撳紑鐢佃剳涓畨瑁呯殑SublimeText3锛屾柊寤篸emo鏂囦欢澶圭敤鏉ュ瓨鏀炬枃浠讹紝鍦ㄩ噷闈㈡柊寤轰竴涓猦tml鏂囦欢锛岄氳繃Tab蹇嵎閿繀閫熷垱寤轰竴涓猦tml妯℃澘锛屽苟鍛藉悕鏍囬銆傚鍥撅細2銆佺浜屾锛屽湪椤堕儴head鏍囩閲屽紩鍏ュ閮CSS鏂囦欢銆傚綋鐒讹紝鍥犱负鏈緥...
绛旓細1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔燿iv鏍囩锛岀劧鍚庡湪div鏍囩涓坊鍔爄mg鏍囩锛2銆佷负div鏍囩娣诲姞鈥渕argin鈥濆睘鎬э紝灞炴у兼槸鈥0 auto鈥濓紝杩欐椂div鏍囩灏嗕細鍦ㄧ綉椤典腑灞呬腑鏄剧ず锛3銆佷负div鏍囩娣诲姞鈥渢ext-align鈥濆睘鎬э紝灞炴у兼槸鈥渃enter鈥濓紝杩欐椂div鏍囩鍐呯殑img鏍囩灏嗕細鍦╠iv鏍囩涓眳涓樉绀猴紝杩欐牱鍥剧墖灏变細鍦ㄧ綉椤典腑灞呬腑...
绛旓細1锛庡杩欎釜CSS灞呬腑闂锛屽彲浠ヤ娇鐢ㄨ缃鑳屾櫙鍥剧墖鐨勬柟娉曘備妇渚嬶細body {BACKGROUND: url(鈥濆浘鐗囨枃浠垛) #FFF no-repeat center;} 鍏抽敭灏卞湪浜庤繖涓狢enter灞炴э紝瀹冭〃绀鸿璇ヨ儗鏅浘鐗囧湪瀹瑰櫒涓眳涓備篃鍙互鎶奀ener鎹㈡垚Top Left鎴栬呯洿鎺ュ啓涓婃暟瀛楁潵璋冩暣瀹冪殑浣嶇疆銆2锛濡備綍浣鏂囨湰鍦―IV涓瀭鐩村眳涓 瀵逛簬鏂囧瓧锛屼究涓嶈兘鐢...
