問題タブ [border-image]

私は自分のウェブサイトの境界線で立ち往生しています。垂直メニューの上部に画像を配置したいのですが、下部に1つ、中央に背景を配置したいのですが、うまくいきません。

これは私のコードです：

真ん中の画像しかありませんが、上/下の画像はありません。Firefoxは私に：

プロパティ«border-bottom-image»不明。プロパティ«border-top-image»不明。

私が間違っていることについて何か考えはありますか？

編集：これはFF、Chorme、Operaで機能しますが、IE9では機能しません。

テキスト入力フィールドに「ストライプ」を適用しようとするとborder-image、Mozilla Firefox の特定のパラメータで機能しなくなります。

このjsfiddleを見てください：http://jsfiddle.net/sxpL9zw1

ご覧のとおり、このページは、周囲に黒いストライプの境界線がある単純なテキスト フィールドをレンダリングします。このフィドルは、実際に私が試したどのブラウザでも問題なく動作します。

ただし、ホストまたはローカルホストでまったく同じマークアップを実行すると、事態は非常に奇妙になります: http://test.tonybogdanov.com/border-image-mozilla-issue/

最新の Mozilla Firefox (35.0) で URL を開くと、次のように表示されます。

ご覧のとおり、左右の境界線は適切にレンダリングされますが、上下の境界線は何とか「ソリッド」に見えます。WindowsのIE10、Chrome、Opera、Safariでもこれをテストしましたが、Firefoxを除いて、すべて境界線が問題なく表示されます.

さらに、border-width上記を増やす9pxと問題はなくなります。これは、プロパティを削除したときにも発生しwidthます。

これを引き起こしている可能性のあるアイデア、またはjsfiddleで再現できないのはなぜですか?

PS また、Firefox で HTML ファイルをドラッグ アンド ドロップしてこれを試しましたが (ホスト関連の問題を除外するため)、それでも失敗します。自分で試してみるための zip は次のとおりです: http://test.tonybogdanov.com/border-image-mozilla-issue/files.zip

タイル化された背景画像と境界画像を持つ Div があります。ボーダー画像は透明な .png で角がデザインされているため、ボーダー ボックスの厚さは全体で約 90px です。IE はボーダー ボックスの内側で背景画像を開始しますが、FF、Chrome、および Safari は境界ボックスの外側の端で背景画像を開始します。IE では、これにより背景色 (または本文の背景) が透明な .png 境界線イメージを通して表示されます。Background-clip と position を試して、IE が境界ボックスの外側から背景画像を開始するようにしましたが、うまくいきませんでした。

不足しているものや提案はありますか? サンプルライブ @ Sample

}

親は体だろう...

}

Web サイトを作成するとき、私はしばしば透明な png ( http://www.noisetexturegenerator.com/で作成された fi ) を使用して、デザインをよりマテリアルでリアルな外観にします。

現在、ボーダーを多用したデザインを進めているので、同じようにテクスチャを追加できないかと考えました。(実線の境界線を定義し、それを png で上書きします (png は透明であるため、以前に指定された単色に適応する必要があります))

border-image私の知る限り、ブラウザは単色を無視するため、この方法では実行できません。（この目的のために、固定色のボーダー画像を設定しないことをお勧めします）

ネストされた div を使用してジョブを実行することもできますが、それはセマンティックではなく、いくつかの Joomla ビューを変更する必要があります。

さらに、100x100px の png (背景と同じ) があると仮定します。サイズを変更せずにプロポーションを維持したり、境界線が予期しない遷移 (パターンの配置ミスによる架空の線など) を取得したりしないように設定するにはどうすればよいでしょうか?

とにかく、誰か他の提案がありますか？(CSS ノイズの多い境界線)

CSS プロパティを使用するborder-imageと、ボーダーは の外側に配置されdivます。ボーダー画像を の中に入れる方法はありますdivか?

CMS (wordpress/joomla) サイトのコンテンツ領域内のほぼすべてのimgタグに対して、まさにこのタイプの境界線を取得しようとしています (そのため、親タグにアクセスせずに、CSS のみを使用するソリューションを探しています)。

最初のステップは、http: //border-image.com/のコード形式でスムーズに進みます (リンクには、使用されている境界線の画像が表示されます) が、画像と実際の境界線の端の間にスペースが作成されます。

最初に、その仕事を行うことができるいくつかの CSS ルールを試しましたが、次のようになりました。

1. border-image-outset: 内側ではなく外側にのみ拡張され、背景が無地の場合に役立ちます
2. outline-offset: アウトラインに対してのみ機能し、ボーダー画像には影響しません
3. 複数の背景: 最も近い背景ですが、境界線が画像の下に表示されるため、パディングを適用する必要があります。意図したとおり、部分的に画像の上にあることを期待しています (実際、これまで実装してきたものです)。

すでに多くの同様の質問を見つけており、最も適切な回答を使用してみました。

1. ::after: 画像に content="" を含める必要があります。これにより、画像は消えます。
2. jquery $(img).after: 境界要素は画像の後に正確に挿入されるため、対応する画像に対して相対的に配置することはできません (前と同じ)。ほとんどの場合、img のサイズが同じではない親タグにこれを設定する必要があります。現在、いくつかのラップを試みています。

これまで、意図したとおりに問題を解決できませんでした。

これは、上記の 5 つのオプションすべてを使用してテストを行っている JSfiddleであり、機能するのに十分な素材があります (きれいな画像、グループ化されたコーナー、言及されたすべてのコードが適用されるなど)。

imgタグに適用できる正確な結果を誰かが達成してくれることを本当に感謝しています。

こんにちは！
すべてのページ コンテンツに干渉することなくオーバーレイする境界線画像を作成するにはどうすればよいでしょうか?

私は個人的な境界線の画像プロパティを使用する必要があると考えましたが、これは直接影響を与えずに以下のコンテンツに適用できないようです.

絶対配置フレームの高さをコンテンツの高さの 100% に設定する方法はありますか、それとも透明な背景とのすべてのコンテンツの相互作用をオーバーレイして妨げます
か?