0

私はstackoverflow.comに不慣れで、これが私の最初の投稿です:

下線付きのh1テキストが必要です。この下線は画像になり、幅は 420px に固定する必要があります。多くの場合、h1 のテキストは 420px よりも広くなりますが、短い場合もあります。これらが下線を画像として取得するための解決策であることがわかりましたが、下線のみの固定幅を設定するにはどうすればよいですか?

h1 {
background-image:url('images/hrBg.jpg');
background-position: 0px bottom;
background-repeat: repeat-x;
}
4

1 に答える 1

0

幅420pxの背景画像を作成します。

次に、次のcssを使用します

    h1 {
      background:url('https://images.squarespace-cdn.com/content/v1/5834a5fd9de4bb511a531745/1572560269010-YEGGAHEJ1O3AG5OAMO7M/ke17ZwdGBToddI8pDm48kEnLsHrnzeww6Ind1smsg7N7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UZMvWVOiG2zXPfa_FplZumXplNQ97KbZI2EjeHIoBACLnr1xKjsq_-rO8kOgOtwYvw/Burning-Up-BG.jpg?format=2500w') no-repeat left bottom;
      min-width:420px;
    }
<h1>Text here</h1>

これにより、背景が 420px で 1 回だけ表示されるようになります。のコンテンツが 420px より小さいmin-width場合に備えて、プロパティを追加しました。h1このno-repeatプロパティは、実際の画像を介して長さを設定したため、背景が 1 回だけ表示されるようにします。

于 2013-01-28T11:15:01.260 に答える