Question

我通过使用背景大小的封面修复背景图片来尝试简单的CSS parallex效果。一切似乎都像我一样，但背景图像太大了。与原始文件相比，它也被裁剪和放大。如果我试图删除＆＃34;封面＆＃34;属性，并用更具体的大小替换它＆＃34; parallex＆＃34;类型影响消失了，我离开了图像的奇怪滚动过渡。

什么是重新调整背景图像大小的最佳方法，这样我就可以按照我喜欢的方式裁剪它，但也有我想要的效果？截至目前，图像太大了。

    .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步：下载您的图片第2步：找到图像的宽度和高度第3步：设置高度和宽度，如下所示：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS - 背景大小：封面;太大了我怎么能重新调整大小？

1 个答案: