CSS

Question

我有以下 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/

Answer 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;
}

<div class="window-close"></div>

CSS - 只调整背景图片的大小，不调整渐变

CSS - size only the background image, not the gradient

size

gradient

background

image