css - 如何在CSS之前显示半张图片

Question

我使用 chosen js 插件来创建多个选择。我正在尝试自定义其样式。我想当元素没有被选中时，左边会有一个灰色的小方 block 。如果选中该元素，它将显示一个蓝色小方 block 。目前我有一个包含 2 个小方 block 的图像，我试图在左侧显示一个方 block ，但它同时显示两个方 block ，我希望它只显示上半部分或下半部分。我怎样才能做到这一点？骑这个是我想尝试的。

.chosen-container-multi.chosen-with-drop .chosen-drop .chosen-results li::before {
            content: url('https://image.ibb.co/iLpwap/Selection_Icon.png');
            position: relative; 
            padding-right: 10px;
 }

Display half a picture in before css

Answer 1

使用您的 sprite 表作为 ::before 伪元素的内容将不允许您以您想要的方式裁剪它。

相反，使用 sprite 表作为背景图像并适当调整伪元素的大小。

在选中状态下，重新定位背景图像，使蓝色区域可见。

var config = {
   '.chosen-select': {},
   '.chosen-select-deselect': {
     allow_single_deselect: true
   },
   '.chosen-select-no-single': {
     disable_search_threshold: 10
   },
   '.chosen-select-no-results': {
     no_results_text: 'Oops, nothing found!'
   },
   '.chosen-select-rtl': {
     rtl: true
   },
   '.chosen-select-width': {
     width: '95%'
   }
 }
 for (var selector in config) {
   $(selector).chosen(config[selector]);
 }

.chosen-container-multi .chosen-choices li.search-choice {
   line-height: 30px !important;
   margin: 5px 5px 5px 0 !important;
 }

 .chosen-container-multi.chosen-with-drop .chosen-drop .chosen-results li::before {
   content: ""; /* Changed */
   position: relative;
   z-index: 100000;
   margin-right: 10px; /* Changed */
   display: inline-block; /* Added */
   width: 22px; /* Added */
   height: 24px; /* Added */
   background: url(https://image.ibb.co/iLpwap/Selection_Icon.png); /* Added */
 }

 .chosen-container-multi.chosen-with-drop .chosen-drop .chosen-results li.result-selected::before {
   background-position: 0 -24px; /* Added */
 }

 .chosen-container-multi .chosen-drop .result-selected {
   color: #444 !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>

<select chosen multiple data-placeholder="Select a item" class="chosen-select" style="width: 400px;">
    <option value="18">Item Test 1</option>
    <option value="19">Item Test 2</option>
    <option value="20">Item Test 3</option>
    <option value="" selected="selected">Select a Item</option>
</select>