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

Answer 1

更改此

#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%;
}

Answer 2

给你一个镜头，你提供的应该工作，只是尝试将高度值和背景大小添加到#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/

上面提供的更新代码！

Answer 3

也许，您需要!important密钥。所以，在#featured CSS类中，写下：

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');

CSS背景图像不显示（图像路径正确）

3 个答案: