3

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

CSS ボーダー画像の負のオフセット

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

CSS ボーダー画像法線

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

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

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

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

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

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

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

4

2 に答える 2

2

::afterこのような擬似要素は要素内に仮想子img要素として挿入されることになっており、画像要素は子を持つことができないため、要素には適していません。

しかし、単純に画像を でラップしてspan(jQuery 経由で実行できます)、それに背景を適用しないのはなぜでしょうか?

.image-border {
    display:inline-block; /* so that it takes up the same space as the image */
    position:relative;
    padding:6px;
    background: url(http://i.imgur.com/0yCz3oA.png) top left,
      url(http://i.imgur.com/fWtyg99.png) top right,
      url(http://i.imgur.com/UcOam5I.png) bottom left,
      url(http://i.imgur.com/pjYWHyM.png) bottom right;
    background-repeat: no-repeat;
}
.image-border img {
    position:relative; /* for z-index to work */
    display:block; /* so that margins can work and there is no underline space reserved */
    margin:-3px; /* drag image “under” the borders on each side
                    by half of the border width resp. span padding */
    z-index:-1; /* make image display below the span */
}

http://jsfiddle.net/nfsuxbyL/

于 2015-03-12T01:04:41.163 に答える