Question

我有表情符号的大图像并使用它：

的CSS：

C:\>php -a

Interactive mode enabled

<?php
echo "Hello, world!";
?>
^Z
Hello, world!

HTML：

.emoticon {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: top;
  background-image: url(path/to/image.png);
  background-repeat: no-repeat;
  background-size: auto;
 }
 emoticon.emoticon_1 { background-position: 0 -869px }

问题是表情符号的原始大小是26x26像素，它太过分了。有没有办法通过css在16x16像素图像中对其进行转换？

Answer 1

尝试以不同的方式使用background-size（您可以指定宽度和高度，无论它是否包含在其中，或覆盖它所分配的元素）：

＆＃13;

.emoticon {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: top;
  background-image: url("http://tigerhousecorbett.com/_include/img/work/full/image-14-full.jpg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
 }
 emoticon.emoticon_1 { background-position: 0 -869px }

＆＃13;

<div class='emoticon emoticon_1'></div>

＆＃13;

有关background-size可以执行的操作的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

用法背景图像作为图像

1 个答案: