Question

我有一张图片，我已经无休止地旋转了。

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

enter image description here

以下是我必须使图像旋转的代码。

.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之外），则修复需要稍微不同，您也可以绝对定位.site-sponsorship（仍在使用z-index）：

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

这里有JSFiddle显示第二个问题。

仅显示旋转图像的特定部分

1 个答案: