Question

我想知道为什么我的图片没有加载到Firefox浏览器上，但加载了safari / chrome？

＆＃13;

.shape {
      border-radius: 25px;
      background: #4D5061;
      content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
      color: white;
      height: 300px;
      margin: auto;
      padding: 3px;
      width: 300px;
      top: 15%;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      z-index: 10;
      }

＆＃13;

<div class="shape"></div>

＆＃13;

Answer 1

请尝试使用background-image。与Mozilla support page

一样

内容 CSS属性与::before和::after伪元素一起使用，以在元素中生成内容。

＆＃13;

.shape {
      border-radius: 25px;
      background: #4D5061;
      background-image: url('http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg');
      color: white;
      height: 300px;
      margin: auto;
      padding: 3px;
      width: 300px;
      top: 15%;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      z-index: 10;
      }

＆＃13;

<div class="shape"></div>

＆＃13;

Answer 2

将CSS更改为此。不要使用content作为背景图片，因为这样做更容易。请尝试使用background shorthand（您也可以使用background-image）。

＆＃13;

.shape {
      border-radius: 25px;
      background: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg) center no-repeat #4D5061;
      color: white;
      height: 300px;
      margin: auto;
      padding: 3px;
      width: 300px;
      top: 15%;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      z-index: 10;
}

＆＃13;

<div class="shape"></div>

＆＃13;

Answer 3

历史上content属性was only defined for pseudo-elements。 Firefox的当前实现仅支持此用例。

例如，

.foo::before {
  content: 'hi';
}

会奏效。用于真实元素，如问题，

.foo {
  content: 'hi';
}

目前无法在Firefox中使用。

Answer 4

实际上，通过这样做：

.shape, .shape:after {
   content: url('path');
}

适用于Chrome，Firefox和Safari。

唯一要注意的是从alt中删除img属性，否则您将在Firefox浏览器中看到alt值和实际图像。

Answer 5

试试这个

.shape :: before {content：url（＆＃34; link＆＃34;）;}

为什么我的图像不会在Firefox浏览器上加载，而是加载在safari / chrome上？

5 个答案: