如何有一个背景图像适当淡出与CSS

Question

我如何让一个id，其中包含一个背景图像，仅用CSS淡入?

下面是我的css文件:

#header{
clear:both;
position:relative; 
z-index: 999; 
border-top: 3px solid #4C718F; 
border-bottom: 1px solid #C1D7E2; 
background: url(images/top-bg.png) repeat top right;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
@keyframes fadein {
from {
    opacity:0;
}
to {
    opacity:3;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
    opacity:0;
}
to {
    opacity:3;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:3;
}
}
@-o-keyframes fadein { /* Opera */
from {
    opacity:0;
}
to {
    opacity: 3;
}
}
}

背景图像没有褪色。我将感激任何帮助，谢谢。

编辑—这里是我在我的HTML中调用类的地方:

<div id="header-out">
    <div id="header">
        <div class="top-bar-wrap">
            <div id="top" class="col-full">
            <div id="logo" class="col-full">
            <?php if ($woo_options['woo_texttitle'] <> "true") : $logo = $woo_options['woo_logo']; ?>
                <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>">
                    <img id="ML" src="<?php if ($logo) echo $logo; else { bloginfo('template_directory'); ?>/images/logo.png<?php } ?>" alt="<?php bloginfo('name'); ?>" />
                </a>
            <?php endif; ?>
            <?php if( is_singular() && !is_front_page() ) : ?>
                <span class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></span>
            <?php else : ?>
                <h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
            <?php endif; ?>
                <span class="site-description"><?php bloginfo('description'); ?></span>
            </div><!-- /#logo -->
            <?php if ( $woo_options['woo_ad_top'] == 'true' ) { ?>
            <div id="topad">
                <?php if ($woo_options['woo_ad_top_adsense'] <> "") { echo stripslashes($woo_options['woo_ad_top_adsense']);  } else { ?>
                    <a href="<?php echo $woo_options['woo_ad_top_url']; ?>"><img src="<?php echo $woo_options['woo_ad_top_image']; ?>" width="468" height="60" alt="advert" /></a>
                <?php } ?>
            </div><!-- /#topad -->
            <?php } ?>
            <div id="navigation" class="asotv">
            <img src="wp-content/themes/biznizz/images/as-seen-on-tv.png">
                <?php
                if ( function_exists('has_nav_menu') && has_nav_menu('primary-menu') ) {
                    wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fl', 'theme_location' => 'primary-menu' ) );
                } else {
                ?>
                <ul id="main-nav" class="nav fl">
                    <?php
                    if ( isset($woo_options['woo_custom_nav_menu']) AND $woo_options['woo_custom_nav_menu'] == 'true' ) {
                        if ( function_exists('woo_custom_navigation_output') )
                            woo_custom_navigation_output();
                    } else { ?>
                        <?php if ( is_page() ) $highlight = "page_item"; else $highlight = "page_item current_page_item"; ?>
                        <li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>"><?php _e('Home', 'woothemes') ?></a></li>
                        <?php
                            wp_list_pages('sort_column=menu_order&depth=6&title_li=&exclude=');
                    }
                    ?>
                </ul><!-- /#nav -->
                <?php } ?>
            </div><!-- /#navigation -->
            <div class="fix"></div>
        </div><!-- /#top -->
       </div>
        <?php //if ($woo_options['woo_slider'] == 'true' && is_home()) include ( TEMPLATEPATH . '/includes/featured.php' ); ?>
    </div><!-- /#header -->
</div><!-- /#header-out -->

Answer 1

我只是想告诉你，修改你的不透明度 3之间的任何其他0.0到1.0

@keyframes fadein {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}
}

Answer 2

您可以在这里看看。

这告诉你关于背景图像的转换。

改变background-image content。

Answer 3

我找到了解决问题的方法。我只需要按如下方式编辑这个类:

#header{
clear:both;
position:relative; 
z-index: 999; 
border-top: 3px solid #4C718F; 
border-bottom: 1px solid #C1D7E2; 
background: url(images/top-bg.png) repeat top right;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;

谢谢大家的帮助，

拉尔夫。