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/Whosebug/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/Whosebug/double_arrow_37px.svg"), -moz-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/Whosebug/double_arrow_37px.svg"), -webkit-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/Whosebug/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>

css3 带缩放图像的背景渐变全宽

css3 background gradient full width with scaled image

css

background-image

linear-gradients