更改按钮上的背景大小？

Question

我有一个更大的图像，但我想使用CSS控制背景大小，使其降至48x78px。我怎么能这样做？

以下是Fiddle以下内容：

.slick-prev,
.slick-next {
  background-size: 48px 78px;
  background: url("http://i.imgur.com/YiHjEd1.png") no-repeat;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 0px;
  height: 78px;
  line-height: 0px;
  margin-top: -10px;
  outline: none;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 48px;
}

<button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>

Answer 1

background属性允许您以简写形式指定背景属性，包括background-size属性。目前，您的background-size被默认auto覆盖。

两种方法

1. 将background-size 放在 background属性之后：

   background: url("http://i.imgur.com/YiHjEd1.png") no-repeat;
   background-size: 48px 78px;      
   

   这将覆盖auto属性给出的默认background值。

   实施例

   .slick-prev,
   .slick-next {
     background: url("http://i.imgur.com/YiHjEd1.png") no-repeat;
     background-size: 48px 78px;
     border: none;
     cursor: pointer;
     display: inline-block;
     font-size: 0px;
     height: 78px;
     line-height: 0px;
     margin-top: -10px;
     outline: none;
     padding: 0;
     position: absolute;
     top: 50%;
     width: 48px;
   }

   <button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>

或

1. 将background-size值放在background属性中：

   background: url("http://i.imgur.com/YiHjEd1.png") 0 / 48px 78px no-repeat;
   

   0与默认background-position值相同，需要指定。 /表示以下长度适用于background-size。这很好地解释了over here on the MDN。

   实施例

   .slick-prev,
   .slick-next {
     background: url("http://i.imgur.com/YiHjEd1.png") 0 / 48px 78px no-repeat;
     border: none;
     cursor: pointer;
     display: inline-block;
     font-size: 0px;
     height: 78px;
     line-height: 0px;
     margin-top: -10px;
     outline: none;
     padding: 0;
     position: absolute;
     top: 50%;
     width: 48px;
   }

   <button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>