Question

我正在使用jplayer并尝试设置播放按钮的风格，但它不起作用，这是控制面板代码的一部分：

HTML

                                  <li class="ui-corner-all ui-state-default jp-play"><a class="ui-icon jp-play ui-icon-play" href="javascript:;" tabindex="1" title="play">play</a></li>
                                  <li class="ui-corner-all ui-state-default jp-pause" style="display:none"><a class="ui-icon jp-pause ui-icon-pause" href="javascript:;" tabindex="1" title="pause" style="display:none">pause</a></li>
                                  <li class="ui-corner-all ui-state-default jp-stop"><a class="ui-icon jp-stop ui-icon-stop" href="javascript:;" tabindex="1" title="stop">stop</a></li>

为了进行比较，以下是li和a围绕播放按钮和停止按钮的样式

li.jp-play{
    margin:0px;
    background:none;
}
a.jp-play{
    margin:0px;
    height:15px;
    width:15px;
    padding:5px;
    background:url('../../resources/images/video/play.png') no-repeat center !important;
    background-size:contain;
    background-origin:content-box;
}

li.jp-stop{
    background:none;
}

a.jp-stop{
    margin:0px;
    height:15px;
    width:15px;
    padding:5px;
    background:url('../../resources/images/video/pause.png') no-repeat center;
    background-size:contain;
    background-origin:content-box;
}

从开发工具来看，两种风格完全没有区别。但是我可以告诉background-size: contain不起作用，因为播放按钮并没有真正缩小到a的大小，但停止按钮（甚至其余的按钮）工作正常。有人对此有任何想法吗？

请告诉我您需要的任何有用的信息！谢谢！

Answer 1

在!important媒体资源上使用background是个问题。由于您正在使用background属性的简写语法，因此您还要将所有浏览器默认值设置为!important。基本上任何你没有在速记中明确声明的内容。

来自MDN：

后台CSS速记属性指定显式给定值，将缺失属性设置为初始值。（强调我的）

那些＆＃39;初始值＆＃39;包括：background-size: auto auto。所以你基本上写了：

background-size: auto auto !important;
background-size: contain;

当然，!important的声明获胜。

如果您确实需要!important声明，请将其放在您定位的特定媒体资源上（例如background-repeat或其他。

这是一个有效的例子。第三个使用！important。

＆＃13;

a {
  border: 1px solid #888;
  display: inline-block;
  height: 100px;
  margin: 10px;
  width: 100px;
}
a.one {
  background:url('http://via.placeholder.com/350x150') no-repeat center !important;
  background-size:contain;
  background-origin:content-box;
}
a.two {
  background:url('http://via.placeholder.com/350x150') no-repeat center;
  background-size:contain;
  background-origin:content-box;
}
a.three {
  background:url('http://via.placeholder.com/350x150') center;
  background-repeat: no-repeat !important;
  background-size:contain;
  background-origin:content-box;
}

＆＃13;

<a href="#" class="one"></a>
<a href="#" class="two"></a>
<a href="#" class="three"></a>

＆＃13;

background-size包含不起作用

1 个答案: