html - 破解 : Modifying :before in inline css

Question

我在 ASP.NET (razor) 页面中有一个“动态样式”(不要问为什么，就是这样)

<div class="myClass" style="background-image: url('@myUrl');">

一切都像一个魅力。但现在我需要将 url 放在“.myClass:before”中(通过 myClass:before{height:100px; position: absolute; background-image:url(' @myUrl'); z-index:-1;}).

这个修改只能在 CSS 中完成，但是 @myUrl 是一个动态值...我们还没有动态 CSS...作为快速修复该怎么做？

Answer 1

对:before伪元素的background-image使用inherit关键字，这样它会自动继承为定义的背景>div.

同时为 div 设置一个 background-size: 0 0 这样图像就不会被显示两次。

div {
   background-size: 0 0;
}

div:before {
  content: "";
  display: block;
  background-image: inherit; 
  background-size: <your size here>;
  position: absolute;
  ...
}

示例:http://codepen.io/anon/pen/PqbKde