0

フォントの周りのコンテンツ領域が中央に配置されていないことに気付きました。ヘッダーに背景を適用したいのですが、中央に配置されていないと非常に見苦しく見えるため、これが問題を引き起こしています。別の div ラッパーを配置せずに、この問題を解決できるより良い解決策はありますか? また、一部のフォントでこの問題が発生する理由を知っている人はいますか?

これが私のCSSコードです。

header h1 { 
    font-family: komika_axisregular;
    font-size: 10em;
    color: #f7f7f8;
    margin: 100px 0 50px 0;
    line-height: 0.7em;
    background-color: rgba(46, 52, 54, 0.5);
}

問題のあるフォントの例と、良いフォントの例を次に示します。どちらもまったく同じ CSS コードを使用しています。
問題のフォント 良いフォント

4

2 に答える 2

0

人々の反応はどれも、私の状況にとって本当に役に立ちませんでした。これを行うのに苦労した主な理由は、半透明の背景の幅と高さを完全に制御したかったからです。審美的な理由から、背景をタイトルの幅にしたくありませんでした。これが私の最終結果です：

HTML

<body>
    <h1>
        <div id="bg-wrap">
            <div id="name-bg"></div> 
        </div>
        <a href="index.html">BRADLEY TSE</a>
     </h1>
</body>

CSS

h1 スタイル

header h1 {
    font-family: bebas_neueregular;
    font-size: 16em;
    color: #ffb477;
    margin: 110px 0 40px 0;
}

a 要素が後に来るので、背景の上に表示されるように z-index を変更する必要がありました。これはおそらくこれを行う適切な方法ではありませんが、今はもう要素の配置をいじりたくありませんでした。

h1 a {
    position: relative;
    z-index: 1000;
}

これは、 #name-bg 要素を画面の中央に適切に配置するために使用されました。

#bg-wrap {
    position: absolute; 
    right:50%;
}

私の名前の上に半透明の背景を重ねました。

#name-bg {
    position: relative;
    right: -50%;
    height: 110px;
    width: 620px;
    margin-top: 24px;
    background-color: rgba(46, 52, 54, 0.8);
    z-index: 1;
}
于 2013-04-25T01:30:49.420 に答える
0

フォントの周りにタグを配置し、<span>背景の色付けを試してみてください。これはブラウザによって異なる場合があります。フォントのレンダリングや、埋め込みに使用されるフォントのフォーマットの違いにより、このようなことが起こらないように、常に HTML 標準を構築する必要があります。ページ。

于 2013-04-24T22:56:55.043 に答える