僅傾斜背景圖像

Question

我只想傾斜背景圖像，但我已將其創建爲外部元素，所以現在整個外部元素都會傾斜而不是僅顯示圖像。我沒有經驗的網頁開發，所以任何幫助或建議表示讚賞。下面的代碼片段，這裏是一個JSFiddle

.vertical-center { 
 
    min-height: 100%; 
 
    /* Fallback for browsers do NOT support vh unit */ 
 
    min-height: 100vh; 
 
    /* These two lines are counted as one :-)  */ 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.gallery-main { 
 
    background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/poppy.png') 50% 0 no-repeat fixed; 
 
    -webkit-background-size: 30%; 
 
    -moz-background-size: 30%; 
 
    -o-background-size: 30%; 
 
    background-size: 30%; 
 
    /* height: 100vh;*/ 
 
    text-align: center; 
 
    background-position: right; 
 
    background-color: #EDEAE3; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.gallery-main:hover { 
 
    -webkit-transform: rotate(-10deg); 
 
    -moz-transform: rotate(-10deg); 
 
    -o-transform: rotate(-10deg); 
 
    -ms-transform: rotate(-10deg); 
 
} 
 

 
.about-main { 
 
    background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/orchid.png') 50% 0 no-repeat fixed; 
 
    -webkit-background-size: 30%; 
 
    -moz-background-size: 30%; 
 
    -o-background-size: 30%; 
 
    background-size: 30%; 
 
    /* height: 100vh; */ 
 
    text-align: center; 
 
    background-position: left; 
 
    background-color: #EFEDE6; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.about-main:hover { 
 
    -webkit-transform: rotate(10deg); 
 
    -moz-transform: rotate(10deg); 
 
    -o-transform: rotate(10deg); 
 
    -ms-transform: rotate(10deg); 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<a href="#"> 
 
    <section class="gallery-main"> 
 
    <div class="container-fluid vertical-center"> 
 
     <div class="row"> 
 
     <div class="col-sm-12 col-sm-offset-8"> 
 
      <h2>GALLERY</h2> 
 
      <p>We create everlasting memories.</p> 
 
     </div> 
 
     <!-- end col --> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    </section> 
 
</a> 
 
<a href="#"> 
 
    <section class="about-main"> 
 
    <div class="container-fluid vertical-center"> 
 
     <div class="row"> 
 
     <div class="col-sm-12 col-sm-offset-10"> 
 
      <h2>ABOUT</h2> 
 
      <p class="larger-font">Working with natural wonders to illustrate the clean lines of modern design.</p> 
 
     </div> 
 
     <!-- end col --> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- hero --> 
 
    </section> 
 
</a>

Answer 1

首先你需要的是重新分配的背景到另一個標籤，它不應該是這個部分的包裝（例如，你可以使用僞元素，如：之前或之後）。

和你的代碼應該是這樣的：對於第一部分

.gallery-main { 
    position: relative 
/* Don't use rotate effect for section wrapper */ 
} 

.gallery-main:before{ 

    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/poppy.png') 50% 0 no-repeat fixed; 
    -webkit-background-size: 30%; 
    -moz-background-size: 30%; 
    -o-background-size: 30%; 
    background-size: 30%; 
    background-position: right; 
    background-color: #EDEAE3; 

text-align: center; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

.gallery-main:hover:before { 
    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg); 
    -o-transform: rotate(-10deg); 
    -ms-transform: rotate(-10deg); 
} 

工作代碼，你可以看到here