Question

我正在制作一个简单的目标网页，并尝试将以下图片作为全屏背景：image

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

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

大部分形象正在被切断，解决这个问题的最佳方法是什么？

谢谢！

Answer 1

你试过这个：

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

Answer 2

对于着陆页而言，这是一个很酷的主意。正在修复的背景是登陆页面的流行酷炫方式。请正确查看，请点击＆＃34;整页＆＃34;单击运行代码段后右上角。

＆＃13;

@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;
  }

＆＃13;

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

＆＃13;

响应式背景图像 - 全屏

2 个答案: