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可能有更聪明的方法吗？

完整示例：

＆＃13;

body {
 background-color: #000; 
}  
.button-custom {
  color: #fff;
  font-family: $font-centennial;
  background-image: url("http://metk.de/kunden/stackoverflow/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/stackoverflow/double_arrow_37px.svg"), -moz-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -webkit-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/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;
}

＆＃13;

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

＆＃13;

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背景渐变全宽与缩放图像

1 个答案: