CSS难题：background-image和border-image同时使用时，background-image会被border-image盖住，怎么解决 CSS background:url和background-...
qt\u7684stylesheet\u4e2d\u5982\u4f55\u8bbe\u7f6e\u5c5e\u6027\u4f7f\u80cc\u666f\u56fe\u81ea\u52a8\u8c03\u6574\u6765\u9002\u5e94\u63a7\u4ef6\u7684\u5927\u5c0f\uff0c\u6025\u6c42\uff01A background-image does not scale with the size of the widget. To provide a "skin" or background that scales along with the widget size, one must use border-image. Since the border-image property provides an alternate background, it is not required to specify a background-image when border-image is specified. In the case, when both of them are specified, the border-image draws over the background-image.
\u9ed8\u8ba4background-image \u4e0d\u4f1a\u7f29\u653e\u56fe\u7247\u4ee5\u9002\u5e94\u63a7\u4ef6\u7684\u5927\u5c0f\u3002
\u5982\u679c\u8981\u63d0\u4f9b\u4e00\u4e2a\u76ae\u80a4\u6216\u80cc\u666f\u56fe\u7247\u4ee5\u81ea\u52a8\u9002\u5e94\u63a7\u4ef6\u5927\u5c0f\uff0c
\u5fc5\u987b\u4e5f\u53ea\u80fd\u7528border-image\u5c5e\u6027\u3002
\u56e0\u4e3aborder-image\u5df2\u7ecf\u8bbe\u7f6e\u4e86\u53ef\u7528\u7684\u80cc\u666f\u56fe\u7247\uff0c
\u6240\u4ee5\u4f7f\u7528\u4e86border-image\u540e\uff0c\u6ca1\u5fc5\u8981\u518d\u6307\u5b9abackground-image\u3002
\u5982\u679c\u540c\u65f6\u6307\u5b9a\u4e86\u4e24\u4e2a\u5c5e\u6027\uff0c\u90a3\u4e48\u5c06\u4f1a\u4f7f\u7528border-image \u7ed8\u5236\u8986\u76d6\u6389background-image\u3002
\u4f8b\u5b50\u4e2d\u7684
QMainWindow > .QWidget {
background-color: gainsboro;
background-image: url(:/images/pagefold.png);
background-position: top right;
background-repeat: no-repeat
}
\u628a\u4e0a\u9762\u7684\u6539\u6210\uff1a
QMainWindow > .QWidget {
background-color: gainsboro;
border-image: url(:/images/pagefold.png);
}
\u5c31\u80fd\u5b9e\u73b0\u4f60\u8981\u7684\u6548\u679c\u4e86\uff0c\u81ea\u52a8\u5c06pagefold.png\u62c9\u4f38\u586b\u6ee1\u6574\u4e2a\u80cc\u666f\u3002
\u662f\u7684,\u540c\u65f6\u8fd8\u5305\u542bbackground-repeat,background-position, background-color,background-attachment\u7684\u5c5e\u6027\u3002
\u6240\u4ee5background\u7684\u5c5e\u6027\uff0c\u90fd\u53ef\u4ee5\u7edf\u7edf\u5199\u4e00\u884c\uff0c\u8fd9\u6837\u4ee3\u7801\u5f88\u7b80\u6d01
\u5982\uff1abackground:#fff url(\u56fe\u7247\u5730\u5740) repeat-x left top;
你可以把border-image.png中间镂空，然后在CSS中用border-image的时候，下刀的位置刚好是镂空位置的边缘，就可以实现你要的效果，如下图：
当然，效果的好坏处决于你所镂空的位置、下刀的位置和设置border的大小
这样很麻烦，你还不如在切图的时候解决呢。
绛旓細鍦ㄧ綉椤靛紑鍙戜腑鎻掑叆鍖椾含鍥剧墖浣跨敤鐨css浠ｇ爜鏄痓ackground锛屽叾鐢ㄦ硶涓锛歜ackground 绠鍐欏睘鎬у湪涓涓０鏄庝腑璁剧疆鎵鏈夌殑鑳屾櫙灞炴э紝鍙互璁剧疆濡備笅灞炴э細background-color锛沚ackground-position锛沚ackground-size锛沚ackground-repeat锛沚ackground-origin锛沚ackground-clip锛沚ackground-attachment锛沚ackground-image 宸ュ叿鍘熸枡锛氱紪杈...
绛旓細鍖哄埆濡備笅锛氫竴锛background鍙互璁剧疆鑳屾櫙棰滆壊銆佽儗鏅浘鐗囥佸畾浣嶇瓑銆傝宐ackground-color鍙兘璁剧疆鑳屾櫙棰滆壊 銆備簩锛屽簳鑹(background-color)鏄函鐨勮壊鍖恒傝儗鏅(background)锛屽彲浠ユ槸绾壊涔熷彲浠ユ槸鍥炬銆備笁锛宐ackground鐨勫睘鎬у兼槸鍥剧墖璧勬簮锛岃宐ackground-color鐨勬槸棰滆壊銆
绛旓細鏈夋椂鎴戝湪鐪css鏃,鐪嬪埌鏈夌殑css灞炴у畾涔変负background:transparent銆傛剰鎬濆氨鏄儗鏅忔槑銆傚疄闄呬笂background榛樿鐨勯鑹插氨鏄忔槑鐨勫睘鎬с傛墍浠ュ啓鍜屼笉鍐欓兘鏄竴鏍风殑鏈夋鏃堕棿娌″啓鏂囩珷浜,涓鐩村湪瀛︽牎,铏界劧甯︾潃鐢佃剳,浣嗘槸涓嶈兘涓婄綉鍟!鏈杩戝湪鐢╦avascript鍐欎竴涓綉椤电増鐨勬搷浣滅郴缁,鍐欏ソ浜嗕竴瀹氬彂涓婃潵,鍐欑殑杩囩▼涓亣鍒板緢澶氶棶棰...
绛旓細鍙互杩欐牱 鏀句袱涓眰 澶栭潰涓涓眰 閲岄潰鍦ㄥ寘涓涓眰 閲岄潰杩欎釜灞傚氨鏀惧浘鐗 background:url("xxx") no-repeat;骞朵笖灞傚眳涓 margin:0px auto;澶栭潰杩欎釜灞傝儗鏅氨璁剧疆鍏ㄥ眬鐨勯鑹 璁剧疆鎴愯窡 閭ｅ紶鍥 寰堝鍚堢殑棰滆壊灏眔k
绛旓細浣犲彲浠ユ妸border-image.png涓棿闀傜┖锛岀劧鍚庡湪CSS涓敤border-image鐨勬椂鍊欙紝涓嬪垁鐨勪綅缃垰濂芥槸闀傜┖浣嶇疆鐨勮竟缂橈紝灏卞彲浠ュ疄鐜颁綘瑕佺殑鏁堟灉锛屽涓嬪浘锛氬綋鐒讹紝鏁堟灉鐨勫ソ鍧忓鍐充簬浣犳墍闀傜┖鐨勪綅缃佷笅鍒鐨勪綅缃拰璁剧疆border鐨勫ぇ灏
绛旓細background-positionY : length | top | center | bottom length : 銆鐧惧垎鏁 | 鐢辨诞鐐规暟瀛楀拰鍗曚綅鏍囪瘑绗︾粍鎴愮殑闀垮害鍊笺俵eft : 銆灞呭乏 锛宑enter : 銆灞呬腑 锛宺ight : 銆灞呭彸 background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat : 銆鑳屾櫙鍥惧儚鍦ㄧ旱鍚戝拰妯悜涓婂钩閾猴紝no-...
绛旓細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歜ody {background-image: url(img/image.jpg)}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔熸妸鍚岀骇鐨刬mg鏂囦欢澶逛腑鐨刬mage.jpg鐢╟ss璁剧疆涓轰簡鑳屾櫙鍥剧墖銆
绛旓細濡傚浘鎵鏄剧ず 褰撳啓浜嗕竴涓0鐨勬椂鍊 娴忚鍣 浼氶粯璁 璁や负鏄 0 center 鎵浠 鎵嶄細鍜0% 50%鏁堟灉涓鏍 甯屾湜瀵逛綘鏈夊府鍔
绛旓細鍦css涓敼鍙background-image鐨勫ぇ灏忓彲浠ラ氳繃灏嗚儗鏅浘鐗囨斁缃殑涓涓猟iv鏍峰紡涓紝鐒跺悗璁剧疆div鐨勬牱寮忓睘鎬ф潵瀹炵幇銆傜ず渚嬫牳蹇冧唬鐮侊細div{ background:url(鍥剧墖璺緞);background-size:800px 600px;background-repeat:no-repeat;}鍏朵腑鍥剧墖璺緞鍙互浣跨敤鐩稿璺緞涔熷彲浠ヤ娇鐢ㄧ粷瀵硅矾寰勶紝涓嶇敤娣诲姞鍙屽紩鍙枫傛渶鍚庝竴琛岀殑background-...
绛旓細1銆css2涓槸鏃犳硶鎺у埗鑳屾櫙鍥剧墖澶у皬鐨勶紝濡傛灉鎯冲疄鐜拌繖绉嶆晥鏋滐紝鍙兘鏄洿鏀瑰浘鐗囦簡銆2銆乧ss3涓彲浠ラ氳繃background-size鏉ユ帶鍒跺浘鐗囩殑澶у皬銆俠ackground-size灞炴х敤娉锛歜ackground-size: length|percentage|cover|contain;1锛塴ength:璁剧疆鑳屾櫙鍥惧儚鐨勯珮搴﹀拰瀹藉害銆傜涓涓艰缃搴︼紝绗簩涓艰缃珮搴︺傚鏋滃彧璁剧疆涓涓...
