1

純粋なCSSでこの種のレイアウトを実現したい:

レイアウト

背景のグラデーションは、ブラウザ ウィンドウの幅の 100% です。内側のテキストは 1000px の div 内にあり、ブラウザ ウィンドウの中央にあります。ここで、テキストでグラデーションの高さを定義したいと考えています。ここに問題があります: グラデーションは絶対位置 ( left: 0px; width: 100%) ですが、テキストは別の div 内にあります。

display:table;and でいくつか試してみましdisplay:table-cell;たが、グラデーション div を配置するposition:absoluteと、テキスト div の高さが継承されません。

javascriptなしで純粋なCSSでこれを達成する方法は誰にもありますか?

編集：

グラデーションが問題ではないことを忘れて申し訳ありません(私は css3 を使用しています)。さらに、コードを追加するのを忘れていました: http://jsfiddle.net/kxu8N/1/

4

6 に答える 6

0

解決策が見つからなかったので、ハッキングしました。コンテンツが JavaScript を介して動的に追加されるため、コンテンツを 2 回追加しました。オーバーレイ div 内 (青い背景の上) に初めて表示され、2 回目は青い背景内に表示されます。visibility: hidden青い背景内のすべての div を非表示にします。

また、両方の div のコンテンツが同じであるため、同じ高さになります。美しくはありませんが、機能します。

于 2012-09-26T09:59:45.283 に答える
0

私の場合、青をグラデーションに移動します。そうすれば、さらに行を追加すると、テキスト行が自動的に作成されます

<div id="container">

    <div id="outer">
      <div id="blue-background">
         <div class="span3" id="blue">
          Here is my content<br>
             and this content should define the height of the underlying #blue-background <br />
             and if we are adding more and more and more
          </div>     
        </div>

    </div>

</div>

次に、そのテキストにCSSの設定をいくつか変更します

#blue {
  z-index: 1;
    position:relative;
    margin:auto;
    text-align:center;
}
于 2012-09-20T15:24:58.567 に答える
0

css3 の background-size プロパティを使用して、グラデーションの高さをスケーリングできます。グラデーションを背景として div の高さを auto に設定します。

于 2012-09-20T15:01:21.800 に答える
0

絶対配置要素はレイアウト フローの一部ではないため、親要素から寸法情報を継承することはできません。

別の要素を使用する代わりに、テキストをラップする要素で CSS 背景画像 (または CSS3 グラデーション) を使用してグラデーションを与える必要があります。

于 2012-09-20T14:56:35.663 に答える
0

HTML構造を知らなくても答えがあります：http://jsfiddle.net/8xagQ/1/

.gradient{
    background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,119,255,1) 25%,rgba(0,119,255,1) 50%,rgba(0,119,255,1) 75%,rgba(0,119,255,0) 100%);

    margin:10px 0;
    text-align:center;
    color:#fff;
    padding:10px 0;
}​

Webkit のグラデーション手順のみを含めたことに注意してください。

于 2012-09-20T15:01:45.033 に答える
0 
<html>
 <head>
<style type="text/css">
p,span{
    margin-left:20px;
}

#logo{
    font-weight: bold;
    height:100px;
}
#slogan{
    width:100%;
    height:150px;
    background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,200,230,15) 25%,rgba(0,200,230,15) 50%,rgba(0,200,230,15) 75%,rgba(0,119,255,0) 100%);}
</style>
</head>
<body>
    <div id="logo">
        <p>Logo</p>
    </div>
    <div id="slogan">
        <span>some text that defines hieght of this</span>

    </div>
</body>
</html>
于 2012-09-20T15:17:40.027 に答える