Question

我使用background-size：cover，以便背景定位区域被背景图像完全覆盖。但设置它＆＃34;覆盖＆＃34;削减我的背景图像。有没有其他方法可以使用＆＃34; cover＆＃34;没有剪切图像？

html：

<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>Hi! I am learning how to make
my very own web page! I really like
blueberry muffins and long walks on
the beach.</p>
<input type="email" placeholder="Email">
<input type="submit" href="#">
</body>

css：

body {
    text-align:center;
    background:url("http://121clicks.com/wp-content/uploads/2012/04/bokeh_photography_03.jpg");
    background-size: cover;
    color:#fff;
    font-family: Helvetica;
}
p {
    font-size: 24px;    
}
input {
  border: 0;
  padding: 12px;
  font-size: 18px;
}
input[type="submit"] {
  background: limegreen;
  color: black;
}

Answer 1

试试这个：

    background:url("http://121clicks.com/wp-content/uploads/2012/04/bokeh_photography_03.jpg") no-repeat center center fixed;

Working Fiddle

Answer 2

background-size有三个可能相关的值：

cover（你正在使用这个） - 尝试使图像覆盖屏幕，即使它将其切断
contain - 尝试使图像尽可能大而不会将其剪掉
100% 100% - 拉伸图像以使其完全吻合，扭曲其纵横比

Answer 3

尝试添加此

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

Answer 4

你可以试试这个，但它可能会拉伸图像：

<body>
    <img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
    <p>Hi! I am learning how to make

我自己的网页！我很喜欢蓝莓松饼和长途跋涉海滩。

用这样的css：

body {
    text-align:center;
    background:url("http://121clicks.com/wp-content/uploads/2012/04/bokeh_photography_03.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color:#fff;
    font-family: Helvetica;
}
p {
    font-size: 24px;    
}
input {
    border: 0;
    padding: 12px;
    font-size: 18px;
}
input[type="submit"] {
    background: limegreen;
    color: black;
}

就像我说的那样，它可能会拉伸图像但是......：/

这里是fiddle。

完整的背景图像

4 个答案: