为 Twitter 中的背景图像覆盖 `background: transparent !important` Bootstrap CSS

Question

我遇到了这个question中提到的相同问题，但是对于background-image，该问题的答案只支持用某种纯色而不是图像填充整个div .

我的情况是，我有一组 div，我给每个人一个不同的 background-image，如下所示：

@media print {
  .AdultDentalChart .tooth .toothImage1 {
    background-image: url("@Url.Content("~/images/DentalChart.png")") !important;
    background-position: 0px 10px;
    -webkit-print-color-adjust: exact;
  }

请记住，我在 Bootstrap 中面临相同的代码，需要覆盖

* {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

Answer 1

~~您在 media print 中有两个 @@，删除其中一个~~ 。正如 OP 所评论的那样，这必须归因于正在使用的框架。 - 不是问题。

使用background-image时必须设置width/height

CSS 来自级联，因此 div 必须在通配符选择器 * 之后才能覆盖它。

演示当然没有使用 print。

@media {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  div {
    background-image: url("//dummyimage.com/200x200") !important;
    background-position: 0px 10px;
    -webkit-print-color-adjust: exact;
    height: 200px;
    width: 200px;
  }
}

<div>text</div>

为 Twitter 中的背景图像覆盖 `background: transparent !important` Bootstrap CSS

Override `background: transparent !important` for background-image in Twitter Bootstrap CSS

css

background-image

twitter-bootstrap

twitter-bootstrap-3