Question

我有一个包含大量小图像的“主图像”，我通过将背景位置设置为一些负偏移来“剪切”成固定大小的div。这很棒！

现在我有一个div，其大小会在网页的生命周期内发生变化。旧代码有自己的背景图像，背景大小设置为“包含”。像这样：

.dump {
 display: inline-block;
 background-image: url("/some/image.png");
 background-repeat: no-repeat;
 background-size: contain;
}

这也很有效。

现在我正试图从我的“主图像”剪辑背景图像。

E.g。我的“主图像”的大小为1800px128像素我喜欢背景的子图像从@ 1200px开始，10px，尺寸为200px x 80px。有没有办法剪切这个矩形，而不是缩放到包含div的维度（编程时未知）

感谢您的提示。但是，我试过但无法得到任何工作：我的问题是，div图像应该跟随包含div的高度，所以在编码时我无法分辨大小，缩放或缩放等等。我举个例子：

<div style="width:100%; height:30%; text-align: center">
  <div class="dump"></div>  
</div>

现在，正如我所说：我希望作为div.dump背景显示的图像是主图像@origin（1200,10） AND 的200x80px区域我希望得到的结果图像缩放以适应容器的高度。所以，我有一个已知的翻译，然后是未知的缩放。也许这只是我的头脑。

Answer 1

我认为最好的方法是使用css转换，我找到this页面，以获取有关如何转换背景图片的进一步参考，并根据它创建此fiddle。

这个想法是你将使用“icon”和“icon：before”类来配置你的精灵以适应一个元素并使用其他类如“less”和“greater”来设置元素的实际大小

.icon
{
    font-size: 2em;
    text-align: center;
    line-height: 3em;
    border: 2px solid #666;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
}

.icon:before
{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    background: url(http://blogs.sitepointstatic.com/examples/tech/background-transform/background.png) 0 0 repeat;

    transform: translate(-50%, -50%) scale(1.5, 1.5);
    background-repeat: no-repeat;
    background-size: contain;
}

.smaller{
    float:left;
    width: 120px;
    height: 120px;
}

.bigger{
    float:left;
    width: 200px;
    height: 200px;
}

因为css会转换支持百分比，所以背景将根据“较小”和“较大”中定义的大小进行剪裁和缩放。

如何裁剪和缩放css中的背景图像

1 个答案:

如何裁剪*和*缩放css中的背景图像

1 个答案:

如何裁剪和缩放css中的背景图像