html - CSS - Background-size : cover; is too big. 如何调整大小？

Question

我正在尝试一个简单的 CSS 视差效果，方法是将背景图像固定为封面的背景大小。一切似乎都如我所愿，但背景图像太大了。与原始文件相比，它也被裁剪和放大。如果我尝试删除“cover”属性，并用更具体的尺寸替换它，“parallex”类型的影响就会消失，我会留下一个奇怪的图像滚动过渡。

调整背景图像大小的最佳方式是什么，这样我就可以按照自己喜欢的方式裁剪它，同时还能产生我想要的效果？到目前为止，图像放大得太大了。

    .fullwidth_100 {
width:100%;
height:500px;
background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg');
background-position: center center;
background-attachment:fixed;
background-repeat: no-repeat;
/*background-size: 100% 80%; */
background-size:cover;
-webkit-transition: background-image 0.4s;
-moz-transition: background-image 0.4s;
-ms-transition: background-image 0.4s;
-o-transition: background-image 0.4s;
transition: background-image 0.4s;
overflow: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}

这是我的 Demo

Answer 1

第 1 步:下载图片 第二步:找到图像的宽度和高度 第 3 步:像这样设置高度和宽度:

.fullwidth_100 {
    width: 1080px;
    height: 500px;
}`

.fullwidth_100 {
width: 1440px;
height: 500px;
background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg');
background-position: center center;
-webkit-transition: background-image 0.4s;
-moz-transition: background-image 0.4s;
-ms-transition: background-image 0.4s;
-o-transition: background-image 0.4s;
transition: background-image 0.4s;
overflow: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}

<div class="fullwidth_100">
         	<div class="large-12 columns">
            <h3>Convenience is our goal</h3>
            <p>With 30 years of experience we are your #1 choice in <br>providing quality printing solutions.</p>
            <a href="#">Learn more about us ></a>
            </div>
 </div>
 
 <br>
 <p>
  Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 </p>
 
 <p>
  Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 </p>
 
 <p>
  Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 </p>
 
 <p>
  Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 </p>
 
 <p>
  Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. Content Goes Here. 
 </p>