0

だから私は私のindex.htmlとcanvas.cssを持っています

body{
}
#canvasHIPPO{
 display:block;
 margin:0px auto 0px;
 width:100%;height:100%
 background-image:url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg')
}

私のindex.htmlで：

<div id="container">
<canvas id="canvasHIPPO" width="800" height="600" display="block"></canvas>
</div>

方法を知りたい: 1) 2) 異なる画面サイズ、および/または 3) 同じ縦横比を維持するにもかかわらず、1) キャンバスを背景の都市画像の上に中央揃えする。

margin:0,auto は (1) を修正し、背景画像の上にキャンバスを中央に配置する必要があると確信していました...何が欠けていますか?

ありがとう！

4

3 に答える 3

1

使ってみませんか

display: webkit-box;

新しいcss3は、チュートリアルに従ってより多くのプロパティを提供します

http://www.w3schools.com/css3/default.asp

于 2012-07-17T04:48:06.147 に答える
1

小さなプロジェクトの場合は、いつでも16進色（#FFFFFF）をRGBとアルファ（アルファチャネルは透明度）に変換できます。これは次のようになりますrgba(255,255,255,100)。ただし、カラー参照のインスタンスが数百または数千ある場合は、チュートリアルをグーグルで検索することをお勧めします。

于 2012-07-17T05:12:33.233 に答える
1

画像を水平方向または垂直方向の中央に配置しようとしていますか? 水平方向に中央揃えする場合、css では次のようにする必要があります。

#content {
    background-image: url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg');
}

#contentHIPPO {
    margin: 0 auto;
    display: block; 
    width: 800px;
    height: 600px;
}

そしてあなたのhtmlで：

<div id="content">
    <div id="contentHIPPO">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

これにより、div が水平方向に中央に配置され、画像が背景で繰り返されます。ブラウザ ウィンドウに合わせて画像のサイズを変更する場合は、javascript を使用してウィンドウのサイズを取得する必要があります。

于 2012-07-17T03:03:39.927 に答える