未知宽高图片的水平垂直居中

来源：互联网发布：梦想知乎编辑：程序博客网时间：2024/05/11 00:57

背景图片居中

原理：
使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址。

示例代码：

<html>    <head>        <style>#box{    width:600px;    height:600px;    background: black;    border:1px solid #d3d3d3;}#box img {    background-repeat: no-repeat;    background-position: center;    background-attachment:fixed;    width:100%;    height:100%;    border: 1px solid #d3d3d3;}        </style>    </head>    <body>        <div id="box">            <img src="img/pixel.png" alt="" style="background-image:url(img/panda.jpg);" />        </div>        <div id="box">            <img src="img/pixel.jif" alt="" style="background-image:url(img/Jackma.jpg);" />        </div>    </body></html>

pixel.gif和pixel.png都是300px*300px的透明图片。经过测试png和gif两种类型其实都可以，究竟哪种类型我觉得看需求，用png的话可以更好的支持半透明的效果。（个人观点）
这里写图片描述
（注意这里一定得是透明的图片，因为它是覆盖在你要显示的图片上）

设置box的宽高都是600px，为了更好的显示加了一个背景颜色和边框。box底下的img给设了一个宽高100%，目的是把透明图片铺满box。

利用background-position中有个center属性。可以完美实现居中。别忘了background-repeat: no-repeat;

background-position 属性设置背景图像的起始位置。

提示：需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

最终效果：
这里写图片描述

这样直接操作html中的url地址就可以不用考虑该图片的宽高实现水平垂直居中。

思考：

/* 省略一部分 */#box div {    background-repeat: no-repeat;    background-position: center ;    width:100%;    height:100%;    border: 1px solid #d3d3d3;}<div style="background-image:url(img/panda.jpg);" />

其实不用img搞一个透明图片覆盖也可以这样实现垂直水平居中的，用透明图层覆盖的话会便于维护一些。

阅读全文

0 0