1. CSS中背景图怎么居中显示啊
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:centercenter;
2. div+css 如何让背景图片居中
DIV+CSS里需要单独定义图片位置才可以,假设图片大小是200*100
<div id="logo">
<img src="img/logo.gif">
</div>
CSS的定义:
#logo{width:500px; height:300px;}
#logo img{margin-top:100px; margin-right:150px;}
3. css中图片居中的设置
background:.enter
bottom
no-repeat;前面是url路径
全部的位置代码如下:
background-position:
left;
代表背景图横向(x轴)靠左,纵向(y轴)居中。(9点钟位置)
background-position:
right;
代表背景图横向(x轴)靠右,纵向(y轴)居中。(3点钟位置)
background-position:
top;
代表背景图横向(x轴)居中,纵向(y轴)靠上。(12点钟位置)
background-position:
bottom;
代表背景图横向(x轴)居中,纵向(y轴)靠下。(6点钟位置)
background-position:
center;
代表背景图横向(x轴)居中,纵向(y轴)居中。(绝对居中)
background-position:
left
top;
代表背景图横向(x轴)靠左,纵向(y轴)靠上。(10点钟位置)
background-position:
left
bottom;
代表背景图横向(x轴)靠左,纵向(y轴)靠下。(7点钟位置)
background-position:
right
top;
代表背景图横向(x轴)靠右,纵向(y轴)靠上。(1点钟位置)
background-position:
right
bottom;
代表背景图横向(x轴)靠右,纵向(y轴)靠下。(5点钟位置)
4. div+css 背景图垂直居中
div+css实现背景图片居中;
首先设置一个div区域,定义一个最外围的区域块,然后再次设置一个小的div区域在其css样式里设置一个背景图片,让小的div区域居中即可:属性:margi:0 auto;
<!DOCTYPEhtml>
<html>
<head>
<metacharset="gb2312"/>
<title>效果区</title>
</head>
<body>
<style>
.main{width:100%;height:500px;background-color:#06F;}
.bjimg{background:url(111111.png)no-repeat;width:525px;height:300px;margin:0auto;}
</style>
<divclass="main">
<divclass="bjimg">
</div>
</div>
</body>
</html>
实现效果网页区域:
标签以及属性详解:
外围div样式取名main:设置一个宽度为100%,高度height:500px的区域让其背景颜色background-color:#06F;蓝色,这样可以更好的浏览效果;
内部的一个小的区域div取名:bjimg,区域大小就是图片的大小;设置一张背景图片,background:url(111111.png) no-repeat;,
margin:0 auto; 让其在大区域块中左右居中,上下设置为0,当然如果感觉太靠上了可以将其值(0)修改一下,数值越大距离越远
5. CSS 如何 让背景图片居中
background-position:center;
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<styletype="text/css">
#t{
margin:50pxauto;
border:1pxsolidred;
width:700px;
height:200px;
background-image:url(1.png);
background-repeat:no-repeat;
background-position:center;
}
</style>
</head>
<body>
<divid="t">
</div>
</body>
</html>
6. CSS怎么样让背景图片水平(垂直)居中
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<bodyclass="bodybg">
<h2>针对当前div层背景居中</h2>
<h3>ps:背景图片是需要高度和内容撑开的。没有高度没有内容,背景图片是无法显示的</h3>
<divclass="bgImg">
</div>
</body>
<styletype="text/css">
.bgImg{
background:url(images/2.png)centerno-repeat;/*这个是简写,可以分开写*/
/*background-position:centercenter;*/
/*background-image:url(images/2.png);*/
/*background-repeat:no-repeat;*/
width:200px;
height:200px;
border:1pxsolid#000000;
}
.bodybg{
background:url(images/2-1.png)centerno-repeat;
height:100vh; /*一屏高度的表示*/
}
</style>
</html>
7. CSS中,背景图片如何居中HTML的,另外不支持直接在图片后加NO
满意答案银雪▄︻┻┳7级2012-03-22可能的哦,在css中的写法是这样的:background:url(../images/**.jpg) no-repeat center center;就这样是可以实现居中的,你自己试一试吧 追问: 额,我的是遨游浏览器.我是想在那里实现居中,IE中没问题 回答: 可以的哦,你自己试一试就知道了…… 追问: 我试过N遍了,绝对不行,IE8,遨游都不行body{background-position:top center; background-repeat:no-repeat;}用这样的IE可以,但是遨游不居中 回答: background-position:center center;
8. 怎么修改背景图片居中并自适应宽度的css
在CSS中加入
margin-right:
auto;
margin-left:
auto;
意思是header这个框架左右自动对齐,这样header这个框架中的背景图片也就跟着居中了
9. css如何使背景图片水平居中
方法和详细的操作步骤如下:
1、第一步,打开前端开发工具,然后创建一个新的html代码页,见下图,转到下面的步骤。
10. css,如何使整个页面背景图片居中
css使整个页面背景图片居中,你是可以给一个总的div设置好一定的width和height,然后给它来设置背景图片,在通过margin让他们居中,同时,background的repeat来平铺实现,具体代码:
<html>
<head>
<style>
#div1{
width:960px;
height:1200px;
border:1pxsoild#f00;
background:url('图片地址')repeat0px0px;
margin:0auto;
}
</style>
</head>
<body>
<divid='div1'>
</div>
</body>
</html>