css怎么用图片做文字的背景 css里有没有办法把文字设为背景啊？
html+css\u600e\u4e48\u5728\u56fe\u7247\u4e0a\u6dfb\u52a0\u6587\u5b57\u7b2c\u4e00\u6b65\uff1a\u6211\u4eec\u9700\u8981\u51c6\u5907\u4e00\u4e2a\u56fe\u50cf
\u4f5c\u4e3a\u4e00\u4e2a\u4f8b\u5b50\uff0c\u6211\u60f3\u5728\u6df1\u8272\u80cc\u666f\u7684\u80cc\u666f\u4e0a\u653e\u7f6e\u767d\u8272\u6587\u5b57\u3002
\u7b2c\u4e8c\u6b65\uff1a\u5c06\u56fe\u50cf\u548c\u5b57\u6bcd\u653e\u5728\u4e00\u4e2adiv\u5143\u7d20\u4e2d
\u5c06\u56fe\u50cf\u548c\u5b57\u6bcd\u653e\u5728\u4e00\u4e2adiv\u6807\u7b7e\u4e2d\u3002\u5728\u793a\u4f8b\u4e2d\uff0c\u5c06\u6587\u5b57\u201c\u4e07\u91cc\u957f\u57ce\u201d\u653e\u5728p\u6807\u8bb0\u4e2d\u3002\u5f53\u7136\u60a8\u53ef\u4ee5\u4f7f\u7528\u6807\u9898\u6807\u7b7e\u800c\u4e0d\u662fp\u6807\u7b7e\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528span\u6807\u7b7e\u3002
1
2
3
4
\u4e07\u91cc\u957f\u57ce
\u7b2c\u4e09\u6b65\uff1a\u6307\u5b9aposition\u5c5e\u6027
\u4e3a\u6bcf\u4e2a\u5143\u7d20\u8bbe\u7f6ecss\u7684position\u5c5e\u6027\u3002
\u5bf9\u4f5c\u4e3a\u7236\u5143\u7d20\u7684div\u6307\u5b9a\u4e3aposition:relative\uff0c\u4ee5\u53ca\u5bf9\u5305\u542b\u8be5\u5b57\u7b26\u4e32\u7684p\u6807\u7b7e\u8bbe\u7f6e\u4e3aabsolute\u3002img\u6807\u7b7e\u4e0d\u52a8\u3002
\u628ap\u6807\u7b7e\u7684\u4f4d\u7f6e\u8bbe\u7f6e\u4e3atop:0; left:0\u3002
\u4e3a\u4e86\u628a\u56fe\u50cf\u653e\u5728\u6a2a\u5411\u4e0a\uff0c\u8bf7\u6307\u5b9a\u4e3aimg\u6807\u7b7e\u7684\u5bbd\u5ea6\u4e3awidth : 100%\u3002
1
2
3
4
5
6
7
8
9
10
11
12
.example{/*\u7236\u5143\u7d20div*/
position: relative;/*\u76f8\u5bfe\u5b9a\u4f4d*/
}
.example p {
position: absolute;/*\u7edd\u5bfe\u5b9a\u4f4d*/
color: white;/*\u6587\u5b57\u8bbe\u4e3a\u767d\u8272*/
top: 0;
left: 0;
}
.example img {
width: 100%;
}
\u6211\u89c9\u5f97\u5c31\u4e24\u79cd\u65b9\u6cd5\u5427\uff1a
\u4e00\u3001\u628a\u6587\u5b57\u505a\u6210\u56fe\u7247\uff0c\u7136\u540e\u5c06\u56fe\u7247\u4f5c\u4e3a\u80cc\u666f\u3002\u5f53\u7136\u8fd9\u6837\u7684\u8bdd\u6587\u5b57\u662f\u6ca1\u529e\u6cd5\u52a8\u6001\u751f\u6210\u7684\u3002
\u4e8c\u3001\u628a\u6587\u5b57\u5c42\u4f5c\u4e3a\u5e95\u5c42\uff0c\u4e0a\u5c42\u653e\u5185\u5bb9\u3002
\u4e3e\u4e2a\u4f8b\u5b50\uff1a
.page{
width:100px;
height:100px;
position:relative;}
.textbg{
position:absolute;
left:0px;
top:0px;
width:100px;
height:100px;
z-index:-1;
color:#999999;
}
\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57\u80cc\u666f\u6587\u5b57
\u5185\u5bb9\u6587\u5b57\u5185\u5bb9\u6587\u5b57\u5185\u5bb9\u6587\u5b57
<div style="background:url(images/pic.jpg) 0 0 repeat;">这里是要输入的文字</div>
images/pic.jpg就是要用做背景的图片url，也就是放图片的位置，相对或者绝对路径都行。
绛旓細缂栧啓html浠ｇ爜鏃讹紝鍦ㄥ浘鐗囦笂鍔犳枃瀛楀疄璐ㄥ氨鏄氳繃css鏍峰紡璁剧疆鏂囧瓧鐨勮儗鏅槸鍥剧墖銆1銆佸垱寤轰竴涓柊鐨刪tml鏂囦欢 2銆佸湪body鏍囩閲屽垱寤轰竴涓猟iv锛屽湪div鐨刾鏍囪閲岄潰鍐欏叆鏂囧瓧 3銆佸湪head鏍囩閲岀紪鍐檆ss鏍峰紡锛岃鍥剧墖浣滀负鏂囧瓧鐨勮儗鏅锛屽苟涓旇缃浘鐗囦笉閲嶅銆4銆佽繖鏍风紪杈慼tml鏃讹紝鍦ㄥ浘鐗囦笂娣诲姞鏂囧瓧鐨勯棶棰樺氨瑙ｅ喅浜嗐
绛旓細杩欎釜鍙互鐢≧GBA鏉ュ疄鐜扮殑 濡傦細background-color: rgba(0,0,0,0.5);瀹屾暣浠ｇ爜锛鏂囧瓧鏂囧瓧鏂囧瓧鏂囧瓧 浠ｉ渶瑕佹敞鎰忕殑锛孯GBA鏄疘E6涓嶆敮鎸佺殑锛
绛旓細1. 灏鏂囧瓧娴湪鍥剧墖涓婃垜浠姞涓猟iv鎶婂浘鐗囧拰鏂囧瓧鍖呭湪涓璧凤紝骞朵笖鍔犱笂img-group鍜宨mg-tip杩欎袱涓猚lass锛屼究浜庡悗闈㈢殑澶勭悊銆傛垜浠璁╂枃瀛楁诞鍦ㄥ浘鐗囦笂闈紝闇瑕佸姞涓婂畾浣嶃傜湅鏂囧瓧娴湪浜鍥剧墖鐨搴曢儴銆俤isplay: inline-block;涓庡畾浣嶆棤鍏筹紝鍙槸浣挎暣涓.img-group闀垮涓庡浘鐗囬傚簲銆2. 鏂囧瓧涓鑳屾櫙澶勭悊鏂囧瓧宸﹀榻愶紝鎴戜滑鎶...
绛旓細鑳屾櫙棰滆壊杩欎釜鏄敤鏉ヨ缃儗鏅鑹茬殑锛屽睍鐜版晥鏋滃涓嬶細
绛旓細<!DOCTYPE HTML> untitled #a{ width: 500px; height: 200px; background-image: url('pic.png'); margin-left: calc((100% - 500px)/2); margin-top: 200px; } #a div{ position: absolute; width: 500px; height: 40px; background-color...
绛旓細background-clip灞炴х敤浜CSS涓殑鑳屾櫙鍓鏁堟灉锛岀敤鏉ュ喅瀹氳儗鏅浘鍍忕殑鍙鍖哄煙銆備互涓嬫槸瀵瑰叾鍏蜂綋浣跨敤鍜屽師鐞嗙殑瑙ｉ噴锛濡備綍浣跨敤background-clip灞炴э紵涓銆佸熀纭浣跨敤鏂瑰紡锛氬湪CSS鏍峰紡琛ㄤ腑鐩存帴璁剧疆銆傚彲浠ュ簲鐢ㄤ簬闇瑕佸鐞嗚儗鏅浘鍍忕殑鍦烘櫙锛屾瘮濡傜綉绔欏竷灞鐨勮儗鏅浘绛夈傚畠鐨勫熀鏈娉曟槸锛歜ackground-clip: shape銆傚叾涓紝shape琛ㄧず...
绛旓細鍦ㄤ笂鍥句腑锛屾湁鍑犱釜div锛屾垜浠互id涓篸1鐨刣iv涓轰緥銆傚垱寤轰簡div鍚庯紝鎴戜滑闇瑕佷负div娣诲姞鏍峰紡銆傛坊鍔犳牱寮忔垜浠叏閮ㄥ啓鍦CSS鏂囦欢涓紝骞跺湪html椤甸潰涓紩鐢ㄣ傚叿浣撶殑鏍峰紡鍏ヤ笅鍥炬墍绀猴細鎴戜滑棣栧厛浣跨敤浜嗕竴寮犱负regist.png鐨鍥剧墖浣滀负鑳屾櫙锛屽皢鍏惰缃负鑳屾櫙銆傚皢鍥剧墖浣滀负鑳屾櫙鐨勫叿浣撲唬鐮佸叆涓嬪浘鎵绀恒傚鏋滄垜浠鐨勮儗鏅灏忎簬鎴戜滑鐨勯〉闈紝...
绛旓細淇濆瓨html浠ｇ爜锛屼娇鐢ㄦ祻瑙堝櫒鎵撳紑锛岃繖涓椂鍊欎細鍙戠幇娴忚鍣ㄤ笂鐨勮儗鏅浘鐗鏄剧ず鍦ㄥ乏涓婅銆傚洖鍒癶tml浠ｇ爜椤甸潰锛屽湪bg-img绫婚噷娣诲姞background-position:center鐨勬牱寮忋備繚瀛榟tml浠ｇ爜鍚庨噸鏂板埛鏂版祻瑙堝櫒锛岃繖涓椂鍊欎細鍙戠幇娴忚鍣ㄤ笂鐨勮儗鏅浘鐗囧凡缁忚嚜鍔ㄥ眳涓簡銆俤w鎬庝箞娣诲姞鑳屾櫙锛1 /9 鎵撳紑DW锛屾坊鍔爌鏍囩锛屽苟璁剧疆绫汇備箣鍚庢柊寤CSS...
绛旓細css浣縟iv鑳屾櫙鍥剧墖濉厖鐨勫叿浣撴搷浣滄楠ゅ涓嬶細1銆佹垜浠鍏堟墦寮鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml浠ｇ爜椤甸潰銆2銆佸湪html浠ｇ爜椤甸潰涓婂垱寤轰竴涓敤浜庤缃儗鏅鑹茬殑div鏍囩锛岀劧鍚庣粰杩欎釜鏍囩娣诲姞涓奵lass = "bg-img"銆3銆佽缃儗鏅浘鐗囷紝鍒涘缓style鏍囩锛岀劧鍚庡湪鏍囩閲岄潰瀵圭被涓篵g-img璁剧疆鑳屾櫙鍥剧墖銆佸浘鐗囦笉閲嶅銆佸銆侀珮鐨勬牱寮忋4...
绛旓細鍦ㄤ笂闈㈢殑 CSS 鏍峰紡涓紝閫氳繃璁剧疆瀹瑰櫒鍏冪礌锛.container锛夌殑 position 灞炴т负 relative锛屼娇寰楀瓙鍏冪礌鐨勫畾浣嶆槸鐩稿浜庡鍣ㄥ厓绱犺繘琛岀殑銆傜劧鍚庯紝璁剧疆鑳屾櫙鍥剧墖鍏冪礌锛.background-image锛夌殑 position 灞炴т负 absolute锛屼娇鍏惰劚绂绘枃妗ｆ祦锛屽彲浠ヨ繘琛岃嚜鐢卞畾浣嶃傚悓鏃讹紝璁剧疆鏂囧瓧鍐呭鍏冪礌锛.text锛夌殑 position 灞炴т负 absolute锛...
