CSS - 仅调整背景图像的大小，而不是渐变答案

【问题标题】：CSS - size only the background image, not the gradientCSS - 仅调整背景图像的大小，而不是渐变
【发布时间】：2015-03-06 21:55:11
【问题描述】：

我有以下 CSS 代码：

.window-close {
    margin-right: 3px;
    background: rgba(234, 145, 116, 1);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -moz-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-gradient(left top, left bottom, color-stop(0%, rgba(234, 145, 116, 1)), color-stop(100%, rgba(205, 74, 30, 1)));
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -o-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -ms-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), linear-gradient(to bottom, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background-repeat: no-repeat;
    display: inline-block;
    height: 15px;
    width: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

}

我想用这个来缩放图像：

background-size: 50% auto;

但它会缩放渐变，而不是图像，我不想要这样的东西。

小提琴：http://jsfiddle.net/mvw4vh9t/

【问题讨论】：

标签： css image background size gradient

【解决方案1】：

逗号分隔background-size 值

background-size: 50% auto, cover;

.window-close {
  margin-right: 3px;
  background: rgba(234, 145, 116, 1);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -moz-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-gradient(left top, left bottom, color-stop(0%, rgba(234, 145, 116, 1)), color-stop(100%, rgba(205, 74, 30, 1)));
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -o-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -ms-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), linear-gradient(to bottom, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background-repeat: no-repeat;
  display: inline-block;
  height: 15px;
  width: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background-size: 50% auto, cover;
}

&lt;div class="window-close"&gt;&lt;/div&gt;

【讨论】：