响应背景图片 - 全屏

问题描述：

我想提出一个简单的登陆页面，我试图让下面的图片为背景全屏：image 响应背景图片 - 全屏

我的CSS目前看起来是这样的：

body { 
    background-image: url('/images/bg.jpeg'); 
    width: 100%; 
    height: 100%; 
    position: fixed; 
}

大多数的图像正在被切断，那么补救此问题的最佳方法是什么？

谢谢！

'背景大小：cover'？另请注意，在所有不同设备上（例如屏幕尺寸），您的图片永远不会有理想的比例。因此，在很多情况下你可能会失去一些图像。诀窍是集中图像的内容。 –

答

你有没有试过这样：

body { 
    margin:0; 
    padding:0; 
    background: url('/images/bg.jpeg') no-repeat center fixed; 
    -webkit-background-size: cover; 
    background-size: cover; 
}

完美！谢谢 – pingo

答

继承人着陆页一个很酷的想法。正在修复的背景对于着陆页来说是一种非常酷的方式。请点击运行代码片段，点击右上角的“完整页面”。

@import url(https://fonts.googleapis.com/css?family=Lato:300); 
 

 
div:nth-child(1){ 
 
    background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66); 
 
    height: 750px; 
 
    width: 100%; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    
 
} 
 

 
div:nth-child(2){ 
 
    height:400px; 
 
    width: 100%; 
 
    background-color: black; 
 
    z-index: 1; 
 
} 
 

 
h1{ 
 
    text-align: center; 
 
    color: white; 
 
    background-attachment: fixed; 
 
    font-family: 'Lato', sans-serif; 
 
    padding-top: 300px; 
 
    z-index: 0; 
 
    text-shadow: 0 0 2px black; 
 
    font-size: 50px; 
 
    }

<div> 
 
    <h1> Michael Barreiro </h1> 
 
</div> 
 

 
<div></div>

响应背景图片 - 全屏

相关推荐