divのバックグラウンドを構成する2つの画像はありますか？

私はCSSで次のように作成して（可能な場合とFirefox）、それはIE7 +上で動作しておく必要があります。divのバックグラウンドを構成する2つの画像はありますか？

すべては、バックグラウンドを除いて行われます！

引用は毎回異なるため、バックグラウンドは自動的に高さを調整する必要があります。

また、配置されているコンテナの幅に合わせて自動調整する必要があります。これによって、グラデーションが伸びないことを意味します。背景は、フェードインの左のグラデーション、次に背景の色、次にフェードアウトの右のグラデーションである必要があります。

HTML

<div id="ehs-quotecontainer"> 
    <div id="ehs-bgleft"> 
    </div> 
    <div id="ehs-bgright"> 
    </div> 
    <div class="ehs-marks" id="ehs-marktop">      
     “ 
    </div> 
    <span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span> 
    <div class="ehs-marks" id="ehs-markbottom"> 
     ” 
    </div> 
</div>

CSS

#ehs-quotecontainer { 
    padding-top:8px; 
    padding-bottom:8px; 
    background-color:#F7F8FA; 
    text-align:center; 
} 
#ehs-bgleft { 
    background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top; 
} 
#ehs-bgright { 
    background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top; 
} 
.ehs-marks { 
    height:20px; 
    color:#8B8C90; 
    font-size:5.0em; 
} 
#ehs-marktop { 
    float:left; 
    margin-top:-18px; 
} 
#ehs-markbottom { 
    float:right; 
    margin-top:-5px; 
} 
.ehs-quotetext { 
    padding-left:4px; 
    padding-right:4px; 
    color:#000; 
    font-size:1.1em; 
    font-style:italic; 
}

正しく背景の仕事を作成する方法上の任意のアイデア：now on JSFiddle -

ここに私の現在のコードは？

出典

2011-01-22 Alex Angas

@Alexを設定することはできますか？ –

初心者の方には、

"のようにマークアップをしたいと思うでしょう。"

のタスクはそれほど重要ではなく、本当に気になるブラウザを指定する必要があります。 – reisio

@ ime Vidas：JSFiddleで設定しました。お礼ありがとうございました –

これを行う最も簡単な方法は、あなたが引用コンテナに比べ、その内部に物事を配置することができるように全体を引用position:relativeようにすることです。あなたが求めるものをその後

を行うのは非常に簡単です。このような

http://jsfiddle.net/7GEah/1/

出典

2011-01-23 23:32:09 david

IE7では動作しません。 – reisio

途中でグラデーションミーティングを使用して1つのイメージを作成できますか？その場合は、使用することができます。

#ehs-quotecontainer { 
    background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center; 
}

をあなたが（あなたが持っているようだ）あなたのボックスのエッジを定義して提供、これは常にあなたのテキストのグラジエント型の画像を中心に説明します。

画像が狭すぎると、背景色が中間に広がるのではなく、画像のエッジと混ざり合ってしまうことがあります。

出典

2011-01-22 03:46:41 Peach

それはそれを見て興味深い方法です。問題は、エッジが定義されておらず、グラディエント画像よりも広いことがあります。私はそれらを特定の幅に固定しなければならないかもしれません。 –

私はこれを言うのは嫌ですが、非常に小さいイメージを使用するので、あなたは背景を使用して背景を持つテキストを挿入しませんか？

ので、ここであなたは以下となります。

それはあなたが持っている背景にテキストを挿入し
であるとして、あなたが引用符で背景を保ちます。最後に、テキストにパディングを付けることができます。あなたは行く準備ができています。

出典

2011-01-22 10:33:50

残念ながら、顧客はスクリーンショットのようなグラデーションを要求しています。ストレッチすることは許されません。そうでなければ、これははるかに簡単です！ –

何か：あなたはデモjsfiddle上またはどこか他の場所をhttp://www.webdevout.net/test?012&raw

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'> 
     <style> 
body { 
    background: url(http://i.stack.imgur.com/VeMeV.png) no-repeat 8px 8px; 
    margin: 71px 8px 8px; 
} 
.quote { 
    border: 1px solid #dfdfdf; 
    position: relative; 
    padding: 8px 35px; 
} 
.quote 
p { 
    margin: 0; 
    font: italic 12px sans-serif; 
    text-align: center; 
    position: relative; 
    z-index: 1; 
} 
.quote .w, 
.quote .e { 
    position: absolute; 
    top: 0; 
    width: 75px; 
    height: 100%; 
    background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png); 
    background-repeat: repeat-y; 
} 
.quote .w { left: 0; background-position: -75px 0; } 
.quote .e { right: 0; background-position: 0 0; } 
.quote 
span { 
    color: #898a8e; 
    font: 70px/70px allerta, serif; 
    position: absolute; 
} 
.quote 
.ldquo { 
    left: -35px; 
    top: -15px; 
} 
.quote 
.rdquo { 
    right: -35px; 
    bottom: -42px; 
} 
     </style> 
    </head> 
    <body> 
     <div style="width: 209px;"> 
      <div class="quote"> 
       <p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p> 
       <div class="w"></div> 
       <div class="e"></div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2011-01-24 01:01:50 reisio

「p」を使うことの重要性とこれができたかもしれない別の方法について私に教えてくれたので、私はあなたの答えを最大限に助けてくれるDavidの答えb/cに行きました。 –

彼らは実際に同じアプローチを使用しています。これはIE7でより良いマークアップと機能しか持ちませんし、引用符用のWebフォントを使用するため一般的なブラウザー間で驚きが少ないはずです。 – reisio

divのバックグラウンドを構成する2つの画像はありますか？

答えて

関連する問題