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图像压缩

回答

相关问题