提问人:level42 提问时间:7/26/2014 最后编辑:level42 更新时间:7/26/2014 访问量:635
仅显示旋转图像的特定部分
Showing only a specific section of a rotating image
问:
我有一个图像,我必须旋转一个无尽的圆圈。
但是,我想知道是否可以仅显示图像的一部分。例如:
下面是我使图像旋转的代码。
.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 -->
答:
1赞
Serlite
7/26/2014
#1
当然,您可以将旋转图像包装在具有相对定位和隐藏溢出的容器元素内。例如,使用容器:.header
.header{
width:100%;
height:200px;
/* These are the important styles */
position:relative;
overflow:hidden;
}
下面是一个 JSFiddle,它使用您提供的相同 CSS 演示了实现的代码。希望这有帮助!如果您有任何问题,请告诉我。
编辑:在你的问题之外,它看起来不像你关闭.如果这是故意的,那么你可以使用 z-index 出现在顶部:.vinyl-wrapper
.site-sponsorship
.site-sponsorship {
position:relative;
z-index:1;
}
否则(如果实际上是在外面),修复将需要有点不同,您也可以绝对定位(仍然使用 z-index):.site-sponsorship
.vinyl-wrapper
.site-sponsorship
.site-sponsorship {
position:absolute;
z-index:1;
top:0;
}
下面是一个 JSFiddle,显示了第二个修复程序。
评论
0赞
level42
7/26/2014
哇,这几乎正是我想要的(少了一点调整)谢谢伙计!仍然习惯于CSS编码。
0赞
Serlite
7/26/2014
太好了,很高兴我能帮上忙!如果它成功解决了您最初的问题,请不要忘记接受答案。
0赞
level42
7/26/2014
好吧,它的工作方式几乎和我想象的完全一样,但是我有一个 h2 项目卡在后台。我已将 Header.php 代码添加到原始问题中。我应该将包装器/背景放在其他地方吗?
0赞
Serlite
7/26/2014
啊。。。看起来你没有关闭.我不确定这是故意的。.vinyl-wrapper
0赞
level42
7/26/2014
如果我关闭 .vinyl-wrapper,如果将网站赞助放在包装器下方。我希望让它覆盖包装器
评论