CSS中背景图怎么居中显示啊

html-css017

CSS中背景图怎么居中显示啊,第1张

css中有一个background-position 属性设置背景图像的起始位置。

他有以下可能的值：

1，top left  左上角

2，top center  正上方

3，top right  右上方

4，center left  正左方

5，center center  正中

6，center right   正右方

7，bottom left  左下方

8，bottom center  正下方

9，bottom right   右下方

所以要是背景图居中显示，css里边加上下边这条属性：

background-position:center center

css使整个页面背景图片居中,你是可以给一个总的div设置好一定的width和height，然后给它来设置背景图片，在通过margin让他们居中，同时，background的repeat来平铺实现，具体代码：

<html>

<head>

<style>

#div1{

width:960px

height:1200px

border:1px soild #f00

background:url('图片地址')repeat 0px 0px

margin:0 auto

}

</style>

</head>

<body>

<div id='div1'>

</div>

</body>

</html>

CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

作用：

作用：background-size设置 背景图像的大小尺寸 。

一、margin和width实现水平居中

优点： 实现方法简单易懂，浏览器兼容性强；

缺点： 扩展性差，只能针对已知宽度的div，无法自适应未知项情况。

)

二、inline-block实现水平居中方法

做点： 简单易懂，扩展性强；

缺点： 需要额外处理inline-block的浏览器兼容性。

1）、opacity作用于元素以及元素内的 所有内容的透明度 ，子元素会继承父元素的 opacity 属性。

2）、rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。