當前位置:首頁 » 背景圖片 » css背景圖片居中

css背景圖片居中

發布時間: 2022-01-06 04:36:38

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>