只顯示旋轉圖像的特定部分

Question

我有一個圖像，我得在無限循環中旋轉。

但是，我想知道是否可以只顯示圖像的一部分。例如：

下面是我必須使圖像旋轉的代碼。

.vinyl { 
    height:2072px; 
    width:2072px; 
    display:block; 
    position:absolute; 
    top: -1150px; 
    left: -200px; 
    background:url('http://level42.ca/mike-vinyl/img/Record.png') right no-repeat; 
    -webkit-animation: spin 2s infinite linear; 
    -moz-animation: spin 2s infinite linear; 
    -o-animation: spin 2s infinite linear; 
    -ms-animation: spin 2s infinite linear; 
} 

@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 
    100% { 
     -webkit-transform: rotate(360deg); 
    } 
} 
@-moz-keyframes spin { 
    0% { 
     -moz-transform: rotate(0deg); 
    } 
    100% { 
     -moz-transform: rotate(360deg); 
    } 
} 
@-o-keyframes spin { 
    0% { 
     -o-transform: rotate(0deg); 
    } 
    100% { 
     -o-transform: rotate(360deg); 
    } 
} 
@-ms-keyframes spin { 
    0% { 
     -ms-transform: rotate(0deg); 
    } 
    100% { 
     -ms-transform: rotate(360deg); 
    } 
} 

這是一個wordpress主題，理想情況下將填充標題背景。 （約1500x300像素）

我已經得到了圖像的標題，但它是在所有其他對象的頂部，並且封面有網頁。

希望這是有道理的。 *請注意，這只是一個原型/想法，我不知道它是否實際或完全實現。

---

[編輯1]

按照下面的建議下，我才得以實現的正是我一直在尋找，但是。我擁有的網站贊助課程滯留在後臺。我如何強制頂部？

<header id="masthead" class="site-header" role="banner"> 
     <div class="vinyl-wrapper"> 
      <div class="vinyl-background"> 
     </div> 
      <h2 class="site-sponsorship"> 
       <div> 
        <span style="">Presented by: </span> 
        <a href="http://shop.sunriserecords.com/"><img src="http://level42.ca/mike-vinyl/img/sunriselogo3.png" style="width:200px;height:62px;vertical-align:bottom"></a> 
       </div> 
      </h2> 

     </a> 

     <div id="navbar" class="navbar"> 
      <nav id="site-navigation" class="navigation main-navigation" role="navigation"> 
       <h3 class="menu-toggle"><?php _e('Menu', 'twentythirteen'); ?></h3> 
       <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e('Skip to content', 'twentythirteen'); ?>"><?php _e('Skip to content', 'twentythirteen'); ?></a> 
       <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu')); ?> 
       <?php get_search_form(); ?> 
      </nav><!-- #site-navigation --> 
     </div><!-- #navbar --> 
    </header><!-- #masthead --> 

Answer 1

當然可能，可以與包裹的相對定位和隱藏溢出容器元件的內部旋轉圖像。例如，與容器.header：

.header{ 
    width:100%; 
    height:200px; 

    /* These are the important styles */ 
    position:relative; 
    overflow:hidden; 
} 

這裏有一個JSFiddle展示實現的代碼，使用您提供相同的CSS。希望這可以幫助！如果您有任何問題，請告訴我。

編輯：除了你的問題，它看起來不像你關閉.vinyl-wrapper。如果這是故意的，那麼你可以使用的z-index得到.site-sponsorship出現在最前面：

.site-sponsorship { 
    position:relative; 
    z-index:1; 
} 

否則（如果.site-sponsorship實際上是外.vinyl-wrapper），修復將需要有點不同，你也可以完全（仍在使用的z-index）定位.site-sponsorship：

.site-sponsorship { 
    position:absolute; 
    z-index:1; 
    top:0; 
} 

這裏顯示了第二修復JSFiddle。