Question

我想将图像插入div的背景。但是，当我进行内联样式设计时，背景图像就会出现。但是在尝试使用外部CSS文件图像后未显示。我已经检查了链接，css外部文件链接了所有已检查的文件。下面是我尝试过的代码。

.txt-op {
  background: url("assets/images/star.svg");
  border-radius: 30px;
}

<div class="container text-center">
  <p class="main-title">ABOUT US</p>
  <div class="row">
    <div class="txt-op col-sm-6">

      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>

    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

当IAM通过外部CSS链接图像时，只会出现问题。但在相同的外部文件中，网络链接工作正常。

帮助将是有意义的。

谢谢：）

Answer 1

或者您将svg编码为data-url e.g with this并在没有任何路径的情况下使用

.txt-op {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='210' width='500'%3E%3Cpolygon points='100,10 40,198 190,78 10,78 160,198' style='fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;'/%3E Sorry, your browser does not support inline SVG.%0A%3C/svg%3E");
  background-repeat: no-repeat;
  border-radius: 30px;
}

<div class="container text-center">
  <p class="main-title">ABOUT US</p>
  <div class="row">
    <div class="txt-op col-sm-6">

      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>
      <p>afjhaafa</p>

    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

div元素内未显示背景图像

1 个答案: