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）保持相同的纵横比。

我很确定 margin:0,auto 应该修复了 (1) 并将画布居中在背景图像的顶部......我错过了什么？

谢谢！

4

3 回答 3

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 回答
1

你为什么不使用

display: webkit-box;

新的 css3 提供了更多的属性遵循教程

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

于 2012-07-17T04:48:06.147 回答
1

如果它是一个小项目，您总是可以将您的十六进制颜色 ( #FFFFFF) 转换为 RGB 和 Alpha（其中 Alpha 通道是透明度），看起来像这样rgba(255,255,255,100)。但是，如果您有数百甚至数千个颜色参考实例，则最好使用谷歌搜索教程。

于 2012-07-17T05:12:33.233 回答