php - CSS背景图片不显示（图片路径正确）

Question

我正在尝试将背景图像添加到 div。由于某种原因，我无法添加图片。你们能告诉我我做错了什么吗？

这是代码：

 #featured {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #ffffff;
background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg');
    background-repeat: no-repeat;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  padding-bottom: 40px;
  width: 99.893617021277%;
}

#featured p {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  padding: 0 40px 0 40px;
  text-align: center;
}

#featured-image {
  margin: 40px 0 0 0;
}

#featured-image .fluid-width-video-wrapper {
  margin-left: -20px;
}

.featured-image img {
  margin-top: 44px;
}

这是 HTML/PHP 部分。这是一个自定义的 wordpress 主题，我只会向您展示使用此 DIV 的网站的确切部分。

<div id="featured" class="grid col-940">

    <div class="grid col-460">

        <h1 class="featured-title">
            <?php
            if ( isset( $responsive_options['home_headline'] ) && $db && $empty )
                echo $responsive_options['home_headline'];
            else
                _e( 'Hello, World!', 'responsive' );
            ?>
        </h1>

        <h2 class="featured-subtitle">
            <?php
            if ( isset( $responsive_options['home_subheadline'] ) && $db && $empty )
                echo $responsive_options['home_subheadline'];
            else
                _e( 'Your H2 subheadline here', 'responsive' );
            ?>
        </h2>

        <p>
            <?php
            if ( isset( $responsive_options['home_content_area'] ) && $db && $empty )
                echo do_shortcode( $responsive_options['home_content_area'] );
            else
                _e( 'Your title, subtitle and this very content is editable from Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or even YouTube video if you like.','responsive' );
            ?>
        </p>

        <?php if ($responsive_options['cta_button'] == 0): ?>  

            <div class="call-to-action">

                <a href="<?php echo $responsive_options['cta_url']; ?>" class="blue button">
                    <?php 
                    if( isset( $responsive_options['cta_text'] ) && $db && $empty )
                        echo $responsive_options['cta_text']; 
                    else
                        _e('Call to Action','responsive');
                    ?>
                </a>

            </div><!-- end of .call-to-action -->

        <?php endif; ?>         

    </div><!-- end of .col-460 -->

    <div id="featured-image" class="grid col-460 fit">

      <?php $featured_content = ( !empty( $responsive_options['featured_content'] ) ) ? $responsive_options['featured_content'] : '<img class="aligncenter" src="' . get_template_directory_uri() . '/core/images/featured-image.png" width="440" height="300" alt="" />'; ?>

        <?php echo do_shortcode( $featured_content ); ?>

    </div><!-- end of #featured-image --> 

</div><!-- end of #featured -->

编辑 2：添加了 HTML 输出：

http://pastebin.com/T78ZPQZK

score 0 · Accepted Answer

也许，你需要!important钥匙。所以，在#featuredCSS 类中，这样写：

background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg') !important;

代替：

background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg');

score 0 · Accepted Answer

改变这个

#featured {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #ffffff;
  background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg');
  background-repeat: no-repeat;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  padding-bottom: 40px;
  width: 99.893617021277%;
}

对此

#featured {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #fff url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg') no-repeat;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  padding-bottom: 40px;
  width: 99.893617021277%;
}

或对此

#featured {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #ffffff;
  background-image: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg');
  background-repeat: no-repeat;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  padding-bottom: 40px;
  width: 99.893617021277%;
}

score 0 · Accepted Answer

试一试，您提供的内容应该可以工作，只需尝试将高度值和背景大小添加到#featured div ...此外，在您的html中的某处您有一个php错误...

HTML：

<div id="featured" class="grid col-940">

    <div class="grid col-460">

        <h1 class="featured-title">
            <?php
            if ( isset( $responsive_options['home_headline'] ) && $db && $empty )
                echo $responsive_options['home_headline'];
            else
                _e( 'Hello, World!', 'responsive' );
            ?>
        </h1>

        <h2 class="featured-subtitle">
            <?php
            if ( isset( $responsive_options['home_subheadline'] ) && $db && $empty )
                echo $responsive_options['home_subheadline'];
            else
                _e( 'Your H2 subheadline here', 'responsive' );
            ?>
        </h2>

        <p>
            <?php
            if ( isset( $responsive_options['home_content_area'] ) && $db && $empty )
                echo do_shortcode( $responsive_options['home_content_area'] );
            else
                _e( 'Your title, subtitle and this very content is editable from Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or even YouTube video if you like.','responsive' );
            ?>
        </p>

        <?php if ($responsive_options['cta_button'] == 0): ?>  

            <div class="call-to-action">

                <a href="<?php echo $responsive_options['cta_url']; ?>" class="blue button">
                    <?php 
                    if( isset( $responsive_options['cta_text'] ) && $db && $empty )
                        echo $responsive_options['cta_text']; 
                    else
                        _e('Call to Action','responsive');
                    ?>
                </a>

            </div><!-- end of .call-to-action -->

        <?php endif; ?>         

    </div><!-- end of .col-460 -->

    <div id="featured-image" class="grid col-460 fit">

      <?php $featured_content = ( !empty( $responsive_options['featured_content'] ) ) ? $responsive_options['featured_content'] : '<img class="aligncenter" src="' . get_template_directory_uri() . '/core/images/featured-image.png" width="440" height="300" alt="" />'; ?>

        <?php echo do_shortcode( $featured_content ); ?>

    </div><!-- end of #featured-image --> 

</div><!-- end of #featured -->

CSS：

#featured {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #ffffff;
background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg') no-repeat 0 0;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  padding-bottom: 40px;
  width: 99.893617021277%;
  height: 500px; /*-- Specify to your liking --*/
}

#featured p {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  padding: 0 40px 0 40px;
  text-align: center;
}

#featured-image {
  margin: 40px 0 0 0;
}

#featured-image .fluid-width-video-wrapper {
  margin-left: -20px;
}

.featured-image img {
  margin-top: 44px;
}

更新/编辑：

更好的是，看看这个 jsfiddle：http: //jsfiddle.net/M63EG/1/

更新了上面提供的代码！

php - CSS背景图片不显示（图片路径正确）

3 回答 3

Related

Reference