0

我在 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>

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

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

谢谢！

4

1 回答 1

0

所以你想缩放然后给图像着色？您可以使用缩放图像，background-size但这不是很好的支持。不幸的是，CSS3 过滤器也没有着色过滤器。

您应该使用<img>so 缩放工作来做到这一点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;
}
于 2013-04-06T15:12:30.830 回答