附加到CSS

Question

我在网站上的背景图片上使用线性渐变，但因为我想将图像随机化，所以我必须在PHP逻辑中使用。

见下文。

<div class="jumbotron hidden-xs hidden-sm" id="headerhome" style="background: -webkit-linear-gradient(rgba(166, 195, 206, 0.5), 
   rgba(166, 195, 206, 0.5)),
   linear-gradient(
   to bottom,
   rgba(64, 64, 64, 0) 70%,
   rgba(77, 78, 94, 0.5) 80%
    ), url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg');

    background: -o-linear-gradient(rgba(166, 195, 206, 0.5), 
    rgba(166, 195, 206, 0.5)),
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg');

    background: -moz-linear-gradient(rgba(166, 195, 206, 0.5), 
 rgba(166, 195, 206, 0.5)),
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg');

    background: -linear-gradient(rgba(166, 195, 206, 0.5), 
 rgba(166, 195, 206, 0.5)),
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg');

    background-blend-mode: multiply;">

是否可以在CSS文件中设置headerhome样式，然后使用内联样式附加URL段。

基本上我试图找出一种相对干净的方法来做到这一点，因为即使当前的代码工作正常，我也被告知它不可维护。

鉴于此，是否有必要为每个浏览器定义渐变？

Answer 1

您可以将图像分配给before伪元素，并为每个浏览器渐变集属性删除工具图像。

＆＃13;

＆＃13;

.container {
  position:relative;
  width:100px;
  height:100px;
}
.container:after {
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  content: "";
  background: url('http://www.emtec-international.com/sites/default/files/sd4-2gb-largesize.png');
}

＆＃13;

<div class="container" style="background: linear-gradient(red, yellow);">
</div>

＆＃13;

＆＃13;

＆＃13;