0

私はこのようなページにいくつかのコンテナを持っています：

<div id="con1" class="window">
    <div>xxxx</div>
    <div>xxxx</div>
</div>

<div id="con2" class="window">
    <div>xxxx</div>
    <div>xxxx</div>
</div>

そしてこのような画像：

ここに画像の説明を入力してください

さて、コンテナを窓のように見せるために、コンテナの背景として画像を作りたいと思います。このような：

ここに画像の説明を入力してください

また、容器の大きさはユーザーによって変わる場合があります。ですから、コンテナのコンテンツが追加されたときに自動拡張できるようにしたいと思います。

何か案が？

アップデート：

私がまだ試したこと：

9divレイアウト

そしてこれが私が今得ているものです：jsfiddle

4

2 に答える 2

1

編集：

ソリューションn.2：

2つのdivを使用することもできます。1つはグラデーションの背景、オプションのシャドウ、丸みを帯びた境界線の「外側」、もう1つは背景が白い「内側」のdivです。

デモ： http： //jsfiddle.net/TqutW/4/

HTML

<div class="windowBorder" >
    <div class="windowContent" >
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>
       <div >xxxxxxxxxxxxxxx</div>                          
    </div>        
</div>

CSS（クロスブラウザ）

.windowBorder{
  margin: 30px;  
  padding: 20px 8px 8px 8px;  
  box-shadow: 2px 2px 5px 1px #111111;
  border-radius: 10px;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 13%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(13%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 13%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 13%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

.windowContent {    
   padding: 10px;
   background-color: white;   
}

あなたはjavascriptを介してあなたのコンテンツの周りにdivを作成する必要があるだけです...

解決策n。1

このために実際に画像を使用する必要はありません。

（たとえば、「木」の境界線のある画像を使用する必要がある場合は、昔ながらの方法で使用する必要があります...すべての角度の画像、垂直線用の画像、水平線用の画像、そしてたくさんのdiv ...）

ここにあるのは、グラデーション（を使用して達成可能CSS3 Gradients）と丸みを帯びた境界線（を使用して達成可能CSS3 border-radius）だけです。あなたも影を追加することができCSS3 box-shadowます...

グラデーションはCSS3グラデーションジェネレーターBACKGROUNDで簡単に生成できますが、現在は属性専用のクロスブラウザーです... WebkitブラウザーのBORDERSでグラデーションを使用できますが、FFやIEではまだ使用できません...ただし、divを次のように追加できますグラデーションの背景を持つウィンドウのヘッダー。

これは、丸みを帯びた境界線と影（グラデーションなし）を使用してウィンドウ内にコンテンツをラップするためのフィドルです。

http://jsfiddle.net/TqutW/3/

そして、必要な唯一のjavascriptは、新しいクラスをコンテナーdivに適用するものです...お楽しみください。

HTML

   <div id="container1">            
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
        <div >xxxxxxxxxxxxxxx</div>
   </div>
   <br/>
   <input type="button" id="click"  value="windowization! :)"/>

CSS

.window{    
  margin: 30px;
  padding: 10px;
  border-style: solid;  
  border-width: 20px 8px 8px 8px;
  border-color: #444;
  border-radius: 10px;
  box-shadow: 2px 2px 10px 1px #111111;
}

JS

document.getElementById("click").onclick=function(){
   document.getElementById("container1").className+=" window ";
}
于 2013-01-08T13:17:25.723 に答える
0

フィドルを試してみてください。 http://jsfiddle.net/siyakunde/TqutW/1/ これはあなたがやろうとしていることですか?

#content{
  background-image: url('http://www.google.com/images/srpr/logo3w.png');
  background-size: 100% 100%;
}
于 2013-01-08T12:52:01.540 に答える