HTML和CSS背景URL圖像壓縮

我創建了一個網頁圖像填充屏幕100％。
但是，發生了問題。
我想填補了圖片的網頁上，如下圖所示：
HTML和CSS背景URL圖像壓縮

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#section 
{ 
    margin-top:240px; 
    margin-left:140px; 
    padding:10px; 
    text-align:center; 
} 
#top-slogan 
{ 
    width:100%; 
    height:953px; 
    background: url('background.png') center; 
} 
#top-header 
{ 
    z-index:100; 
    position:absolute; 
    width:100%; 
    height:133px; 
} 
</style> 
</head> 
<body> 
<div id="top-slogan" class="wrapper"> 
    <div id="top-header" class="section"> 
    </div> 
</div> 
</body> 
</html>

結果出來了，也存在一些問題。
沒有被填滿，圖像被重複。
我想要一個解決方案。

我想刪除「這部分」：

來源

2016-09-22 F. Kim

You can add this style

#top-slogan{ 
background-repeat: no-repeat; 
background-size : cover; 
background position : center center; 
}

來源

2016-09-22 06:10:52

謝謝！完善！ –

不客氣:) –

您可以添加不重複。然後它不會重複。「background-repeat：no-repeat;」

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#section 
{ 
    margin-top:240px; 
    margin-left:140px; 
    padding:10px; 
    text-align:center; 
} 
#top-slogan 
{ 
    width:100%; 
    height:953px; 
    background: url('backgroung.png') center; 
    repeat:no-repeat; 
} 
#top-header 
{ 
    z-index:100; 
    position:absolute; 
    width:100%; 
    height:133px; 
} 
</style> 
</head> 
<body> 
<div id="top-slogan" class="wrapper"> 
    <div id="top-header" class="section"> 
    </div> 
</div> 
</body> 
</html>

來源

2016-09-22 06:04:18

謝謝。但沒有填充屏幕..TT.TT –

您可以通過設置它的寬度和高度來縮放此圖像。＃top-slogan { width：100％; height：953px; background：url（'backgroung.png'）center; \t background-size：100％100％; \t重複：no-repeat; } –

可以縮放這一形象通過設置它的寬度和高度。

#top-slogan 

{ 
    width:100%; 
    height:953px; 
    background: url('backgroung.png') center; 
background-size: 100% 100%; 
repeat:no-repeat; 
}

來源

2016-09-22 06:22:55

謝謝你！祝你有美好的一天！ –

試試這個

#top-slogan 
{ 
width:100%; 
height:953px; 
background: url('background.png') no-repeat center; 
background-size :cover; 
}

來源

2016-09-22 06:47:45

HTML和CSS背景URL圖像壓縮

回答

相關問題