修改和设计裁剪图像

Question

我在 html 和 css 中裁剪了一张图片。当我编写<span> 标记时，显示的裁剪图像。但我需要知道如何修改它。

我有以下代码：

    <style type="text/css">
.design  {
padding-left:25px;
background:url('Flings.png') no-repeat top left;
display: inline-block;
height: 17px;
width: 0px;
margin-left: 550px;
}
</style>
<div style="height: 200px;">
<span class="design" style='font-size: 40px;'></span>
</div>

当我使用 span 标签时，会显示裁剪后的图像。但我想修改它。

例子：

<span class="desgin" style='color: red;'></span></h3>

我想给图像本身上色并改变它的大小，我有点卡在这里。

希望你能理解我，我会很高兴得到任何帮助。

谢谢！

Answer 1

所以你想缩放然后着色图像？您可以使用background-size 缩放图像，但这不是很好的支持。 CSS3 filters unfortunately don't have a colorize 也过滤。

您应该使用<img> 执行此操作，以便在没有background-size 的情况下进行缩放，然后在图像顶部使用另一个透明元素来提供色调效果。不幸的是，<img> 标签不支持伪元素，所以需要使用包装器。

jsFiddle

HTML

<div class="red-tint">
    <img src="https://www.google.com.au/images/srpr/logo4w.png" />
</div>

CSS

img {
    /* scale the image */
    width:200px;
    height:auto;
}

.red-tint {
    position:relative;
    display:inline-block;
}

.red-tint:after {
    background: rgba(255, 0, 0, 0.5);
    display:block;
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:1;
}

更新

啊，你想裁剪，那么这只是使用背景位置的问题。您需要为background-position 提供负的左侧和顶部位置，它们表示距图像左上角的偏移量。例如，这将绘制一个 200x100 的图像块，距离图像左侧 100 像素，从顶部向下 20 像素。

jsFiddle

.design {
    width:200px;
    height:100px;
    background:url(https://www.google.com.au/images/srpr/logo4w.png) no-repeat;
    background-position:-100px -20px;
}