CSS - 定位圖像

因此，我有一個圖像作爲背景，它'縮放以填充'框架，這正是我想要的，但圖像不居中，因此當窗口更小時在手機上，顯示的圖像只是邊緣。下面是我使用的代碼：CSS - 定位圖像

HTML

<div class="Background"> 
<div>

CSS

.Background { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100vw; 
    height: 100vh; 
    background-image: url('background.png'); 
    background-size: cover; 
}

如果任何人都可以給我一些提示，那麼這將是巨大的。由於

來源

2015-07-03 dwinnbrown

'背景位置：中心;' – fcalderan

@FabrizioCalderan感謝的作品:) – dwinnbrown

-1

CSS代碼

.Background { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100vw; 
    height: 100vh; 
    background-image: url('background.png'); 
    background-size: cover; 
    background-position: center; 
}

來源

2015-07-03 08:43:28 akash

-1

background-position: center;

添加到您的CSS規則將圍繞背景圖像

text-align:center

添加到您的div將所有的內容裏面，甚至文本

來源

2015-07-03 08:42:02 clement

工作

試試這個：100％的工作。

.Background { 
    display: block; 
    margin: 0px auto; 
    width: 100%; 
    height: 100%; 

    background-size: cover; 
    background : rgba(0, 0, 0, 0) url("background.png") no-repeat scroll center top; 
}

來源

2015-07-03 08:46:51

包括問題的例子將是有益的。

試試這個。

 .Background { 
     display: block; 
     margin-left: auto; 
margin-right:auto; 
     width: 100vw; 
     height: 100vh; 
     background: url('background.png') no-repeat /* <- however you want the image to repeat */ center; 
    }

見http://www.w3schools.com/css/css_background.asp

來源

2015-07-03 08:48:15 bnahin

CSS - 定位圖像

回答

相關問題