17

ページの上部に一番上の線を引くため<div>に、最初に作成しました。<body>

<body>
    <div class="bordertop"></div>
    .....
</body>

とスタイル：

body {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    margin:0;
}
.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
}

ただし、top_border image中にテキストを書かないと表示されませんが、書き<div>たくありません。どうすればこれを修正できますか？

4

9 に答える 9

17

divが空であるため、divを0pxの高さにしたまま、「開く」ようにプッシュするコンテンツはありません。divに明示的な寸法を設定すると、背景画像が表示されます。

.bordertop 
{
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
    height: 100px;
    width: 100%; /* may not be necessary */
}
于 2012-08-15T03:21:55.853 に答える
3

widthcssと要素のサイズを任意のサイズに設定する必要がある場合がありheightます<div>

.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;
    width: 200px;
    height: 100px;
}
于 2012-08-15T03:22:36.370 に答える
2

を与えdivますheight:1px。それはうまくいくはずです。そうでなければ、あなたdivは0px高く、何も見えないことを意味します。

あなたもそれを与えることができますpadding-top:1px

あなたができるもう一つのことはあなたのCSSbackground-imageのに行のを設定することです。bodyこれは、線がの幅全体であると想定していbodyます。

デモを見る

于 2012-08-15T03:23:50.517 に答える
0

私の上の答えが示唆しているように^^'それは実質的にサイズがないためです。コンテンツを中に入れてサイズを変更するか、css bordertopクラスで幅/高さまたはパディングを設定するか、setを使用して別の空を中に入れることができますサイズ。すでに答えがあるので、この答えをスキップするつもりでしたが、幅/高さが唯一の選択肢ではないことを追加したかっただけです。

ちなみに、ここの人々はとても速く投稿しているので、レースと賞品は何かと思うことがあります。いくつかあるはずです。他の人を助けること自体が素晴らしい賞品だと思います。:)私がこれをタイプし始めたとき、まだ答えはありませんでした。

于 2012-08-15T03:30:59.800 に答える
0

私が見つけた最良の方法は次のとおりです。風景の場合：

width:100%;
height:0;
padding-top:[ratio]%;

ポートレートの場合：

width:[ratio]%;
height:0;
padding-top:100%;

どちらの側が長いかを判断し、このディメンションを100％として受け入れる必要があります。次に、[比率]を計算します。これは、100％長いディメンションに対する短いディメンションのパーセンテージです。次に、上記のソリューションのいずれかを使用します。

于 2017-02-14T02:30:32.130 に答える
0

私はかなり長い間同じ問題を抱えていました。私の解決策は、min-heightのスタイルラインを与えることでした。これにより、内部に要素がない場合に指定された高さまでdivが開きます。内部の要素が多いほど高さは大きくなる可能性がありますが、小さくすることはできません。

コード例：

.fixed-bg {

    /* The background image */
    background-image: url("img_tree.gif");
    /* Set a specified height, or the minimum height for the background image */
    min-height: 500px;
    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;
}

https://www.w3schools.com/cssref/pr_background-attachment.aspから取得したコード

于 2017-04-17T18:21:34.630 に答える
0

ボディ内の唯一のdiv要素である場合は、次のスタイルを使用して全幅を占めるようにします。

.bordertop  {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-image: 
   url('../images/top_border.png');
}
于 2018-08-27T07:26:45.913 に答える
0

幅を設定しても、divに背景が表示されませんでした。URLセクションに「../」を入力する必要があったことがわかりました。それから、かなり長い間苦労していた画像が表示されました。

left {
    width: 800px;
    height: auto;
    min-height: 100%;
    position: relative;
    background-image: url("../img/loginpic.jpg");
    background-size: cover;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: crimson;
}
于 2020-04-23T17:36:28.807 に答える
0

<p></p>それ以外の場合は、スタイルでとを開き、デフォルトの余白の長さを削除して、スペースをあまり消費しないmargin: 0;追加することができるので、機能します。height: 0.1px

注：50％を超えてズームアウトされなくなるまでは正常に機能するため、ボディに適用する前にユースケースを確認してください。

于 2021-11-24T15:24:22.507 に答える