Question

我在html＆amp;中裁剪了一张图片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的图像块，从图像的左侧100px，从顶部向下20px。

jsFiddle

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

修改＆amp;设计裁剪图像

1 个答案:

更新