2

私はこのようなことを達成したい：

例

要素の幅は100％です。中央のコーナーのみを使用し、border-topと組み合わせます。

.element { 
border-top: solid 1px #ccc ; 
background: url('../images/arrow.png') no-repeat center top; 
}

しかし、境界線は矢印の内側にとどまります。境界線を隠そうとup image background -1pxしましたが、うまくいきませんでした。どうすればよいですか？

4

4 に答える 4

3

追加のコンテナで解決しました：

HTML:

<div class="first"><div class="second"></div></div>​

CSS:

.first {
    border-bottom: 5px solid #000;
    width:100px;
    height:100px;
    background-size: 20%;
    background-position:50% 105%;
    box-sizing: border-box;
}

.second {
    width:100%;
    height:104px;
    background: url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcROusF7rh7H4mWpr8wQIllxWPAHHIShRyG62xp3qy2O4Av_NmNV) no-repeat;
    background-size: 20%;
    background-position:50% 100%;
}
​

jsfiddle: http://jsfiddle.net/AKpLT/

于 2012-08-18T15:10:52.843 に答える
0

すでに画像を作成している場合は、全体を背景画像にして、必要な形にします。適切な長さの要素に合わせて調整できるように、十分な長さにします。

于 2012-08-18T15:03:54.433 に答える
0

興味深い問題です。:beforeこれは、セレクターを使用して画像を境界線上に絶対配置する1 つの工夫されたソリューションです。実際の例については、この jsfiddleを参照してください。関連するコードは次のとおりです。

div {
    border: 1px solid red; /* For demo purposes it's red */
    position: relative;
}

div:before {
    content: url('http://i.stack.imgur.com/P3zMs.png');
    position: absolute;
    top: -1px;
    width: 100%;
    text-align: center;
    line-height: 1px;
}

結果のスクリーンショットは次のとおりです。

上記のコードの結果

編集:セレクターのブラウザー互換性は:before、IE8 以降でのみサポートされていることを示しています。content: url(...)さらに悪いのは、コンストラクトや:before 疑似要素の構造を知る限りbackground-image、IE9 でも機能しないように見えるからです。幸いなことに、これは優雅な劣化に該当するはずです...

于 2012-08-18T15:37:14.950 に答える
0

Mash のように、背景には別の要素を使用しますが、Mask とは異なり、CSS の :before または :after 疑似要素を使用します。

<h2>Heading</h2>

h2 {
    border-top: 1px solid #ccc;
    position: relative;
}

h2:after {
    background: url(IMAGE);
    content: " ";
    display: block;
    width: WIDTH-OF-IMAGE;
    height: HEIGHT-OF-IMAGE;
    position: absolute;
    left: 50%;
    top: -1px;
    margin-left: -WIDTH-OF-IMAGE/2;
}
于 2012-08-18T16:09:14.810 に答える