<html>
<head>
<meta charset="UTF-8">
<title>八桂金融</title>
</head>
<style type="text/css">
body {margin: 0overflow: hidden}
.box {height: 300px}
.num {height: 150pxwidth: 150pxbackground: rgba(255, 255, 255, 0.5)}/*仅仅background被渲染透明度50%*/
.box2 {height: 300px}
.num2 {height: 150pxwidth: 150pxbackground:#fffopacity: 0.5}/*div内容全部都被opacity渲染,透明度50%*/
</style>
<body>
</body>
<div class="box" style="background: url(
)">
<div class="num">
123
</div>
</div>
<br>
<div class="box2" style="background: url(
)">
<div class="num2">
123
</div>
</div>
</html>
透视效果是依赖于人眼来产生的，而人眼的可视范围大概在120度左右，3D物体处在这个范围内产生的透视效果才是真实的，超出这个范围（比如说物体是放在你耳朵边的），人眼看不到了，自然就不会有什么透视效果了，假如这个时候又强行利用电脑手段把这个并不存在的逗透视效果地用图片表现出来，就肯定会出现严重的变形。因此那个属性的x或y值不能设置得太大。你可以自己测试一下：你把手机横着贴在耳边，这时候你的眼睛只能看到手机的一小部分，大部分是看不到的，这时候你看到的手机的透视效果（尽管只有一小部分，而且很模糊，因为它不在你的视觉中心）是真实的，但假如现在要把看不见的那一大部分也用图片表现出来，你脑子里能想象出应该是什么样子吗看
这是实际上指的是成像画布距离div的距离，你可以把成像画布想象成地面，有一个div站在地面上150米距离（就是这个属性设置150的意思，不过单位不是米），然后太阳把div的影子投在地面上。离地面远和近，都会使影子在地面上的大小形状不一样。这个影子，就是最终你在电脑屏幕上看见的。这个属性没有上下限。
