WordPress 中的 CSS 翻转徽标
我正在尝试在 Wordpress 标题徽标上应用 CSS 图像翻转。我知道这对你们来说是一个非常简单的解决方案，但我似乎无法在 Stackoverflow 上的任何地方找到答案。我认为这可能与位置有关，但添加 :relative 或 :absolute 似乎没有什么区别？
下面是我的 CSS
#top {
height: 105px;
padding-left: 10px;
padding-top:27px;
}
#logo {
/* background-attachment: scroll;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;*/
height: 70px;
width: 461px;
}
#logo a:hover {
background-attachment: scroll;
background-image: url('images/flatgrey.png');
background-repeat: no-repeat;
background-position: left top;*/
height: 70px;
width: 461px;
}
#logo a {
display:block;
height: 70px;
width: 461px;
和PHP
<body <?php body_class(); ?>>
<div id="outer">
<div id="top">
<div id="logo">
<?php
ob_start();
ob_implicit_flush(0);
echo get_option('imbalance_custom_logo');
$my_logo = ob_get_contents();
ob_end_clean();
if (
$my_logo == ''
): ?>
<a href="<?php bloginfo("url"); ?>/">
<img src="<?php bloginfo('template_url'); ? >/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a>
<?php else: ?>
<a href="<?php bloginfo("url"); ?>/"><img src="<?php echo get_option('imbalance_custom_logo'); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php endif ?>
I'm trying to apply a CSS image rollover on a Wordpress header logo. I know this will be a really easy solution for you guys but i can't seem to find the answer anywhere on Stackoverflow. I think it may be to do with position but adding either :relative or :absolute seems to make no difference?
below is my CSS
#top {
height: 105px;
padding-left: 10px;
padding-top:27px;
}
#logo {
/* background-attachment: scroll;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;*/
height: 70px;
width: 461px;
}
#logo a:hover {
background-attachment: scroll;
background-image: url('images/flatgrey.png');
background-repeat: no-repeat;
background-position: left top;*/
height: 70px;
width: 461px;
}
#logo a {
display:block;
height: 70px;
width: 461px;
& PHP
<body <?php body_class(); ?>>
<div id="outer">
<div id="top">
<div id="logo">
<?php
ob_start();
ob_implicit_flush(0);
echo get_option('imbalance_custom_logo');
$my_logo = ob_get_contents();
ob_end_clean();
if (
$my_logo == ''
): ?>
<a href="<?php bloginfo("url"); ?>/">
<img src="<?php bloginfo('template_url'); ? >/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a>
<?php else: ?>
<a href="<?php bloginfo("url"); ?>/"><img src="<?php echo get_option('imbalance_custom_logo'); ?>" alt="<?php bloginfo('name'); ?>" /></a>
<?php endif ?>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我取出了 #logo 的 background-attachment 和 background-position 行，所以 #logo 的样式是这样的：
这似乎对我有用。它能解决您的问题吗？
I took out the background-attachment and background-position lines for #logo, so the style for #logo was this:
And that seemed to work for me. Does it solve your problem?
我假设您想在翻转时将 logo.png 替换为 flatgrey.png 。如果是这种情况，您应该删除整个
background-image: url('images/logo.png');
#logo a的 CSS。您还需要将background-repeat: no-repeat;行从#logo a:hover的 CSS 移动到#logo a。I'm assuming you want to replace logo.png with flatgrey.png on rollover. If that is the case, you should get rid of the whole
<img src=".../images/logo.png"...>tag and then addbackground-image: url('images/logo.png');
#logo a. You will also want to move thebackground-repeat: no-repeat;line from the CSS of#logo a:hoverto#logo a.