css色彩变小

Question

我试图从图像中创建一个按钮并为图像着色。我试过的是这个：

.tinted-image {

    width: 300px;
    height: 200px;

    background:
    /* top, transparent red */
    linear-gradient(
    rgba(255, 0, 0, 0.45),
    rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(facebook-icon.png);

    background-size: 10% auto;

    background-repeat: repeat;


}

这样可行，但它可以复制许多图像。所以我放置了：

background-repeat: no-repeat; 

现在它有效......但色调区域不再是300x200。请帮我保持色调大小，只调整图像大小

Answer 1

要调整背景图片的大小，您应该试用background-image: url(...) center; background-size: cover; 属性。使用它，您可以指定如何缩放背景图像。

您可能需要的是：

convain

以下是w3.org网站上的精彩插图：

最有趣的是cover和contain。区别在于：

• cover - 将图片完全嵌入您的元素中;
• {{1}} - 调整图片大小以完全覆盖您的元素。

Answer 2

您可以使用CSS过滤器。

filter: sepia(1) saturate(10) brightness(0.4) hue-rotate(300deg);

sepia会给您棕褐色调，hue-rotate会根据旋转程度将棕褐色调更改为其他颜色。 300deg会使它变红。 由于棕褐色不是一种“纯”的音调，因此使用saturate和brightness值将有助于您微调结果。