css3背景渐变全宽与缩放图像

Question

有没有办法用 css 设置独立于背景的一般大小的图像大小？

我用下面的代码设置了背景的大小，所以渐变和图片的宽度都是30px。

background(url("../images/icons/double_arrow_37px.svg"), linear-gradient(to top bottom, rgb(171, 129, 85), rgb(148, 112, 74)));
background-size: 30px 37px;

我需要将图像的宽度设置为 30px，将渐变设置为按钮宽度的 100%。

我已经知道创建具有正确尺寸的额外图像的解决方法，但也许有更聪明的 css 方法？

完整示例：

body {
 background-color: #000; 
}  
.button-custom {
  color: #fff;
  font-family: $font-centennial;
  background-image: url("http://metk.de/kunden/*/double_arrow_37px.svg");
  background-size: 30px 37px;
  background-position: center left;
  background-repeat: no-repeat;
  margin-top: 70px;
  padding: 15px 45px;
  border-radius: 0;
  border: 0;
  text-transform: uppercase;
  overflow: hidden;
}

.button-custom.bronze {
  background-color: #ab8155;
}

.button-custom.bronze:hover {
  background: url("http://metk.de/kunden/*/double_arrow_37px.svg"), -moz-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/*/double_arrow_37px.svg"), -webkit-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/*/double_arrow_37px.svg"), linear-gradient(to top bottom, #ab8155, #94704a);
background-position: center left;
  background-size: 30px 37px;
  background-position: center left;
  background-repeat: no-repeat;
  color: #fff;
}

<a href="#" class="button-custom bronze">Contact</a>

Answer 1

在 CSS3 中，您可以使用多个图像背景。线性背景被解释为图像而不是颜色。知道了，你可以这样写：

body {
    height: 600px; /* not relevant for your problem */
    width: 600px;
}
div {
    height: 500px; /* not relevant for your problem */
    width: 500px; /* not relevant for your problem */
    border: 3px dashed green; /* not relevant for your problem */

    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -moz-linear-gradient(top,  red 0%, blue 100%);
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, blue));
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-linear-gradient(top,  red 0%, blue 100%);
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -o-linear-gradient(top,  red 0%, blue 100%);
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -ms-linear-gradient(top,  red 0%, blue 100%);
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), linear-gradient(to bottom,  red 0%, blue 100%);
    
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat, no-repeat;
    background-size: 150px, 300px;
     
}

<div>Yo!</div>