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

-1

我想添加背景图像到div。出于某种原因，我无法添加图片。你们能告诉我我做错了什么吗？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'); 
    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

来源

2013-08-20 user2496520

您能不能给你的HTML的例子吗？似乎在这里很好地工作http://jsfiddle.net/brbcoding/tF62u/12/ – brbcoding

它很难说在这种情况下，你有没有试过像你这样的背景速记符号：'background：url（'http： //'）no-repeat #fff;'...语法看起来是正确的，所以也许在你的代码中有其他冲突的CSS。 – sulfureous

您是否尝试过使用'background-image：url（... etc）;'而不是仅仅使用'background''应该与它的“短手”方式无关，但我不相信每个网页浏览器都会得到实施相同。 – CD001

变化这

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

来源

2013-08-20 16:13:35

谢谢你的回答@Cj贝洛。再次形象不存在。我尝试与其他DIV像'#featured p'和图像显示... – user2496520

给这个一杆，你提供了什么应该工作，只是尝试添加一个高度值和背景大小的#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; 
}

UPDATE /编辑：

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

上面提供的更新的代码！

来源

2013-08-20 17:47:57 Michael

也许，您需要使用!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');

来源

2013-08-20 22:09:32

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

回答

相关问题