web-dev-qa-db-ja.com

：before and background-image ...動作するはずですか？

Divを取得し、:beforeと:afterをコンテンツとして適用します。それは完全に機能します。ここで、背景画像を適用して、divのサイズが変更されても繰り返されるようにする必要がありますが、機能しないようです。 :beforeと:afterの背景画像は機能するはずですか？

現在のコード：

HTML：

<div id="videos-part">test</div>

CSS：

#videos-part{
    background-color: #fff;
    height: 127px;
    width: 764px;
    margin: -6px 0 -1px 18px;
    position: relative;
}
#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
}
csscss3background-image
50
Michi

@michi; height疑似クラスでbeforeを定義します

CSS：

#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
    height:20px;
}
70
sandeep

:beforeおよび:after要素の背景画像は機能するはずです。あなたが例を投稿すると、おそらくあなたのケースではうまくいかない理由を伝えることができます。

以下に例を示します。 http://jsfiddle.net/namas/3/

たとえば、background-size: 100% 100%（幅/高さ）を使用して、要素の寸法を％で指定できます。

5
meo
 color: transparent;

私のためにトリックを作ります

#videos-part:before{
    font-size: 35px;
    line-height: 33px;
    width: 16px;
    color: transparent;
    content: 'AS YOU LIKE';
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik04LDE0TDQsNDloNDJsLTQtMzVIOHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik0zNCwxOWMwLTEuMjQxLDAtNi43NTksMC04ICBjMC00Ljk3MS00LjAyOS05LTktOXMtOSw0LjAyOS05LDljMCwxLjI0MSwwLDYuNzU5LDAsOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMzQiIGN5PSIxOSIgcj0iMiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTkiIHI9IjIiLz48L3N2Zz4=');
    background-size: 25px;
    background-repeat: no-repeat;
    }
1
Altravista

何らかの理由で、画像を表示するためにfloatまたはleftに設定する擬似要素の right プロパティが必要です。疑似要素のheightおよびwidthは両方とも設定する必要がありますが、パーセンテージではありません。 Firefox 67を使用しています。

0
StSav012