【问题标题】:Background-image url in php echophp echo中的背景图像url
【发布时间】:2016-02-10 15:08:42
【问题描述】:

所以我在我的 PHP 网站上使用bootstrap css。出于某种原因,我可以得到一个img src 使用相同的位置打印就好了。但是当我需要使用背景图像时,图像不会显示。我不知道为什么。这是我试图展示标准引导代码的部分。

//<!-- Wrapper for slides -->
      echo '<div class="carousel-inner">';
      echo '<div class="item active">';
      echo '<div class="fill" style="background-image:url("http://placehold.it/1900x1080&text=Slide One");"></div>';
      echo '<div class="carousel-caption">';
      echo '<h2>Caption 1</h2>';
      echo '</div>';
      echo '</div>';
      echo '<div class="item">';
      echo '<div class="fill" style="background-image:url("http://placehold.it/1900x1080&text=Slide Two");"></div>';
      echo '<div class="carousel-caption">';
      echo '<h2>Caption 2</h2>';
      echo '</div>';
      echo '</div>';
      echo '<div class="item">';
      echo '<div class="fill" style="background-image:url("http://placehold.it/1900x1080&text=Slide Three");"></div>';
      echo '<div class="carousel-caption">';
      echo '<h2>Caption 3</h2>';
      echo '</div>';
      echo '</div>';
      echo '</div>';

填充css是这样的:

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

当我把它放在一个普通的html 文件中时,它工作正常。但是,我正在使用php 和自动加载,因此需要使用 echo 语句来打印出 html 部分。我不知道为什么这不显示图像。有什么想法吗?

【问题讨论】:

    标签: php css twitter-bootstrap twitter-bootstrap-3 background-image


    【解决方案1】:

    您的报价有冲突。

    试试echo '<div class="fill" style="background-image:url(\'http://placehold.it/1900x1080&text=Slide One\');"></div>';

    【讨论】:

      【解决方案2】:

      CSS 看起来不错,一定是 CORS 问题。假设您在您的网站上使用 https,您的网址也需要是 https。或者您可以删除协议并让网址以“//”开头,然后它会自动加载您页面加载的任何协议。

      另外,使用 heredocs,那堆回声很讨厌。

      echo <<<HTM
      your
      html
      goes here
      HTM;
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-09-19
        • 1970-01-01
        • 1970-01-01
        • 2020-01-23
        • 2014-02-03
        • 2019-09-05
        相关资源
        最近更新 更多