Question

<div class="my-sprite"></div>

.my-sprite {
    background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
    height:100px;
    width:100px;
    background-position: 0 0;
    background-position:-200px 0px;
}

我不能让我的精灵扩展到更小的维度。我希望它是实际大小的一半，即100x100px，我如何使用background-size属性进行缩放？现在它只显示100x100px的完整图像大小......

Answer 1

您的图片精灵的尺寸为500x400，因此，如果您想在background-size上减少2，请定义此尺码的一半，然后调整background-position以获得您想要的任何图标：

＆＃13;

.my-sprite {
    background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
    height:50px;
    width:50px;
    background-position:-350px 0px;
    background-size:250px 200px;
    
    border:1px solid;
}

＆＃13;

<div class="my-sprite"></div>

＆＃13;

您可以按任何比例数减少更多，您只需要进行正确的计算

＆＃13;

.my-sprite {
    background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
    height:calc(100px / 5);
    width:calc(100px / 5);
    background-position:calc(3/5 * 100px) 0px;
    background-size:calc(500px / 5) calc(400px / 5);
    
    border:1px solid;
}

＆＃13;

<div class="my-sprite"></div>

＆＃13;

这是一个通用公式，它使用CSS变量作为比例编号，也可以选择图标。

＆＃13;

.my-sprite {
    display:inline-block;
    background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
    height:calc(100px / var(--n,1));
    width:calc(100px / var(--n,1));
    background-position:calc(var(--i,3)/var(--n,1) * 100px) calc(var(--j,0)/var(--n,1) * 100px);
    background-size:calc(500px / var(--n,1)) calc(400px / var(--n,1));
    
    border:1px solid;
}

＆＃13;

<div class="my-sprite"></div>
<div class="my-sprite" style="--n:2;--i:2;--j:2"></div>
<div class="my-sprite" style="--n:3;--i:4;--j:1"></div>
<div class="my-sprite" style="--n:4;--i:1"></div>
<div class="my-sprite" style="--n:5;--j:3"></div>
<div class="my-sprite" style="--n:0.5"></div>
<div class="my-sprite" style="--n:0.8"></div>

＆＃13;

Answer 2

您可以使用if(!defined('MY_CONSTANT')) { // You can show a message die('Access not allowed!'); // Or send user to index.php, first delete above line (die) header('Location:index.php'); exit; // This line is needed to stop script execution } // rest of header and footer code。

transform:scale()

.my-sprite {
  background-image: url("https://cdn.pbrd.co/images/HkKj0eC.png");
  height: 100px;
  width: 100px;
  background-position: -200px 0px;
  transform: scale(.3);
}

CSS sprites不会扩展

2 个答案: