CSS样式：如何使文字显示在图片下方？ CSS样式：如何使文字显示在图片下方？
\u901a\u8fc7CSS+DIV\u600e\u4e48\u5c06\u6587\u5b57\u5199\u5728\u56fe\u7247\u4e0a\u65b9HTML\u56fe\u7247\u548c\u6587\u5b57\u662f\u5e76\u5217\u663e\u793a\u7684\u3002\u5982\u4e0b\uff1a
1. \u5c06\u6587\u5b57\u6d6e\u5728\u56fe\u7247\u4e0a\u6211\u4eec\u52a0\u4e2adiv\u628a\u56fe\u7247\u548c\u6587\u5b57\u5305\u5728\u4e00\u8d77\uff0c\u5e76\u4e14\u52a0\u4e0aimg-group\u548cimg-tip\u8fd9\u4e24\u4e2aclass\uff0c\u4fbf\u4e8e\u540e\u9762\u7684\u5904\u7406\u3002
\u6211\u4eec\u8981\u8ba9\u6587\u5b57\u6d6e\u5728\u56fe\u7247\u4e0a\u9762\uff0c\u9700\u8981\u52a0\u4e0a\u5b9a\u4f4d\u3002\u770b\u6587\u5b57\u6d6e\u5728\u4e86\u56fe\u7247\u7684\u5e95\u90e8\u3002
display: inline-block;\u4e0e\u5b9a\u4f4d\u65e0\u5173\uff0c\u53ea\u662f\u4f7f\u6574\u4e2a.img-group\u957f\u5bbd\u4e0e\u56fe\u7247\u9002\u5e94\u3002
2. \u6587\u5b57\u4e0e\u80cc\u666f\u5904\u7406\u6587\u5b57\u5de6\u5bf9\u9f50\uff0c\u6211\u4eec\u628a\u6587\u5b57\u5c45\u4e2d\u3002\u7ed9.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff1a
\u6587\u5b57\u4e0d\u6e05\u695a\uff0c\u6211\u4eec\u52a0\u4e0a\u80cc\u666f\u548c\u5b57\u4f53\u989c\u8272\uff0c\u5e76\u9002\u5f53\u7684\u8bbe\u7f6e\u4e00\u4e0b\u900f\u660e\u3002\u7ed9.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff1a
3. \u9f20\u6807\u60ac\u6d6e\u7279\u6548\u73b0\u5728\u9759\u6001\u6548\u679c\u5df2\u7ecf\u5b8c\u6210\u4e86\uff0c\u63a5\u4e0b\u6765\uff0c\u52a0\u4e00\u4e0b\u9f20\u6807\u60ac\u6d6e\u51fa\u73b0\u6587\u672c\u7684\u6548\u679c\uff0c\u73b0\u5728.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff0c\u8ba9\u6587\u672c\u9ed8\u8ba4\u9690\u85cf\uff1a
\u518d\u52a0\u4e0a\u9f20\u6807\u60ac\u505c\u5728\u56fe\u7247\u4e0a\uff0c\u663e\u793a\u6587\u672c\u7684\u4ee3\u7801\uff1a
\u4ee3\u7801\u603b\u6c47HTML
\u6211\u662f\u96ea\u8c79
CSS
.img-group { position: relative; display: inline-block;} .img-tip { position: absolute; bottom: 0; background: #333; color: #fff; opacity: 0.6; display: none;} .img-group:hover .img-tip { display: block; width: 100%; text-align: center;}
1\u3001\u6253\u5f00Dreamweaver\u521b\u5efacss\u9875\u9762\u3002
2\u3001\u8f93\u5165\u4ee5\u4e0b\u4ee3\u7801\uff0c\u5982\u56fe\u3002
3\u3001\u5207\u6362\u81f3\u8bbe\u8ba1\u6a21\u5f0f\u6dfb\u52a0\u56fe\u7247\u4e3a\u80cc\u666f\uff0c\u8f93\u5165\u6587\u5b57\u770b\u6700\u7ec8\u6548\u679c\uff0c\u5982\u56fe\u3002
举例：
img{ display:block; }HTML代码：
<img src="图片路径" />这里是测试文字，可以在图片下方。
1、比如我在div里面书写了一些文字，然后想要在放入一张图片，这时候小伙伴可能会直接想到img标签，其实这个想法是错误的。
2、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。
3、然后通过background给div添加一张图片作为它的背景。
4、通过url()来连接图片，url里面放置的就是背景图片的路径。
5、我就随意的放了一张图片用作背景，注意，路径要写对哦。
绛旓細鎶婃枃瀛楀浐瀹鍦ㄥ浘鐗涓璫ss浠ｇ爜锛岀敤CSS鏍峰紡鎺у埗鏂囧瓧娴簬鍥剧墖涓婃柟锛岃繖涓垜浠鍏堣鏄庣‘鐨勭煡閬撲竴涓眰鐨勬蹇碉紝杩欓噷灏辨槸灏嗗浘鐗囦负涓涓眰锛岀劧鍚庢枃瀛楀張鏄竴涓眰锛岀劧鍚庢垜浠娇鐢ㄤ竴涓猵osition瀹氫綅锛灏嗘枃瀛瀹氫簬鍥剧墖鐨勪綅缃紝鐒跺悗浣跨敤z-index杩欎釜灞傚睘鎬э紝鏉ュ仛锛寊-index鐨勬暟鍊艰秺澶э紝灞傚氨瓒婂湪涓婇潰锛岃繖閲岄氳繃鍏蜂綋鐨勪唬鐮佹潵鐞嗚В...
绛旓細鏂囧瓧鍦ㄥ浘鐗涓鏄剧ず <!DOCTYPE html> abox{ position:relative;/*瀹瑰櫒鐩稿瀹氫綅*/ width:300px;/*瀹藉害300px*/ margin:0 auto;/*妯悜灞呬腑*/ } abox img{ width:300px;/*瀹藉害300px*/ } span{ position:absolute;/*鏂囧瓧瀹瑰櫒缁濆瀹氫綅*/ display:block;/*span杞负鍧楀厓绱*/ width:100%;...
绛旓細鍥剧墖榛樿涓哄唴鑱斿厓绱狅紝鍙互璁剧疆鍥剧墖涓哄潡绾у厓绱狅紝鐒跺悗鐩存帴鍐鏂囧瓧灏卞彲浠鍦ㄥ浘鐗涓嬫柟浜嗐備妇渚嬶細img{ display:block; }HTML浠ｇ爜锛氳繖閲屾槸娴嬭瘯鏂囧瓧锛屽彲浠ュ湪鍥剧墖涓嬫柟銆
绛旓細1銆侀鍏堣緭鍏ワ細<!DOCTYPE html> 榧犳爣鎮仠鍥剧墖涓鏄剧ず鏂囧瓧 鍦ㄧ嚎婕旂ず www.divcss5.com img{border:0}/* css 娉ㄩ噴璇存槑锛氳缃浘鐗囪竟妗嗕负0 */ body{behavior:url("csshover.htc");text-align:center;}/* css娉ㄩ噴璇存槑锛氬吋瀹筰e6 鏀寔鏍囩浣跨敤hover */ 2銆佺劧鍚庤緭鍏ワ細.divcss5{ position:relative;...
绛旓細1銆佹瘮濡傛垜鍦╠iv閲岄潰涔﹀啓浜嗕竴浜鏂囧瓧锛岀劧鍚庢兂瑕佸湪鏀惧叆涓寮犲浘鐗囷紝杩欐椂鍊欏皬浼欎即鍙兘浼氱洿鎺ユ兂鍒癷mg鏍囩锛屽叾瀹炶繖涓兂娉曟槸閿欒鐨勩2銆侀鍏堬紝鎴戜滑搴旇鍏堢粰div璁剧疆瀹藉害鍜岄珮搴︼紝淇濊瘉鏂囧瓧鏈変竴涓寖鍥淬3銆佺劧鍚庨氳繃background缁檇iv娣诲姞涓寮犲浘鐗囦綔涓哄畠鐨勮儗鏅4銆侀氳繃url()鏉ヨ繛鎺ュ浘鐗囷紝url閲岄潰鏀剧疆鐨勫氨鏄儗鏅浘鐗囩殑璺緞銆
绛旓細csshtml濡備綍灏鍥剧墖img鏍囩姘村钩灞呬腑鍨傜洿灞呬腑鍜屾按骞冲瀭鐩村眳涓璫sshtml濡備綍姘村钩銆佸瀭鐩淬佹按骞冲眳涓浘鐗囩殑img鏍囩棣栧厛,css鍥剧墖姘村钩灞呬腑銆 1.浣跨敤margin:0auto浣垮浘鐗灞呬腑,鍗崇粰鍥剧墖娣诲姞css鏍峰紡銆傝竟璺:0鑷姩濡備笅: 2銆佽缃甶mgBox鐨勬牱寮忓涓:2.鎸夊涓嬫柟寮忚缃甶mgBox鐨鏍峰紡: 3.姝ゆ椂鐨勬晥鏋滃涓:(鍥剧墖鍦ㄥ鍣ㄤ腑,姘村钩灞呬腑) 绗簩,css鍥剧墖...
绛旓細div鏄灏缃戦〉鍖哄潡鍖栧鐞嗭紝css鏄粰瀵瑰簲鐨刣iv搴旂敤瀵瑰簲鐨鏍峰紡锛屼綘鎵璇寸殑鍥剧墖涓婅繘琛鏂囧瓧澶勭悊锛屾湁涓ょ鍔炴硶锛岋細1灏嗗浘鐗囧彉鎴愯鍖哄潡鐨勮儗鏅浘锛岀劧鍚庡湪杩欎釜鍖哄潡涓綘灏卞彲浠ヨ嚜宸卞畾涔夋枃瀛椾簡锛屾瘮濡傛墍瑕佹斁鐨勬枃瀛
绛旓細1:娣诲姞涓涓狣IV,閲囩敤缁濆瀹氫綅锛屽浘鐗囨墍灞濪IV涓哄熀鍑 2:鍥剧墖涓鸿儗鏅浘 绗竴绉嶆柟娉: 鏂囧瓧 绗簩绉嶆柟娉: 鏂囧瓧
绛旓細缁忚繃澶氭鐨勬祴璇曪紝涓婇潰涓夌鏂规硶閮藉彲浠ヨ鍥剧墖鍜鏂囧瓧鍦ㄥ悓涓琛鏄剧ず锛屼笅闈㈤┈娴风ゥ灏辩敤瀹炰緥鏉ヤ负澶у鎿嶄綔涓涓嬶細 1銆佸湪css涓粰div娣诲姞涓娾渧ertical-align:middle鈥濆睘鎬 鏈変簺鏈嬪弸浼氬彂鐜帮紝濡傛灉涓琛屽唴瀹逛腑鏈夊浘鐗囨湁鏂囧瓧鐨勮瘽锛屾枃瀛楀線寰浼氳嚜鍔ㄧ殑搴曢儴瀵归綈锛屽奖鍝嶇編瑙傦紝閭濡備綍璁瀹冧滑鐩稿浜庡瀭鐩村眳涓憿锛屽緢绠鍗曪紝灏辨槸鍦ㄥ浘鐗鍜屾枃...
绛旓細url(鍥剧墖璺緞);">鏂囧瓧 2銆佹枃瀛 涓婇潰涓ょ鎯呭喌閮藉彲浠ヨ揪鍒颁綘鐨勯渶姹傦紝CSS鑷璋冩暣锛
