當前位置:首頁 » 背景圖片 » 背景圖片垂直居中
擴展閱讀
tt語音主頁背景圖片 2024-10-25 00:21:18
中年男人桌面圖片 2024-10-25 00:10:08

背景圖片垂直居中

發布時間: 2022-02-03 23:43:29

Ⅰ 在html代碼中怎麼讓背景圖片居中

在背景所在的表格或者DIV中,設置樣式:style="background-image:圖片地址; background-position:center; background-repeat:no-repeat;"

搞定!
祝你成功,望採納!

Ⅱ div+css中,怎樣讓一個div裡面的背景圖片垂直居中

給div加屬性 div{background:url(圖片) center center no-repeat;}
如果背景圖在左面 div{background:url(圖片) left center no-repeat;}
........

Ⅲ 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>

Ⅳ 怎麼才可以使背景圖片垂直居中呢

body的background-position:50% 50%,無論browser窗口如何變化背景圖的中心與窗口中心重合,但是在FF和opera中,只能實現在水平方向上居中,垂直方向背景圖的中心與窗口的上邊緣重合。如果把backgrond-position:50% 0%,那水平居中,垂直方向上背景圖的上邊緣和窗口的上邊緣重合,不知道什麼理由。另外background-position:center center效果跟年50% 50% 相同

Ⅳ 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)修改一下,數值越大距離越遠

Ⅵ 在body里設置背景圖片怎麼保證垂直居中

加一行html { height:100%; }

Ⅶ div+css中一個背景圖片,如何讓圖片在背景圖片上垂直居中

<style type="text/css">
.box {
/*非IE的主流瀏覽器識別的垂直居中的方法*/
display: table-cell;
vertical-align:middle;

/*設置水平居中*/
text-align:center;

/* 針對IE的Hack */
*display: block;
*font-size: 175px;/*約為高度的0.873,200*0.873 約為175*/
*font-family:Arial;/*防止非utf-8引起的hack失效問題,如gbk編碼*/

width:200px;
height:200px;
border: 1px solid #eee;

width:100px;
height:100px;
}
.box img {
/*設置圖片垂直居中*/
vertical-align:middle;
cursor:pointer;
}
</style>

本文來自: PQ秀秀網(http://www.pqshow.com) 詳細出處參考:http://www.pqshow.com/design/htmlcss/200912/12739.html

Ⅷ 在網頁設計中怎麼讓背景圖片水平居中

background:url(bg.jpg)
no-repeat
center
center;
:no-repeat為背景圖不重復,最好是滿足1280寬度的解析度下位滿屏,圖片可以寬度為1280像素,第一個center為水平居中,第二個center為垂直居中,第二個center換成top也就是頂部顯示背景圖。

Ⅸ 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>

Ⅹ 背景圖片水平和垂直的都居中,有辦法實現么

background(圖片路徑名稱) center top;