html - 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-size 属性。使用它您可以指定如何缩放背景图像。

您可能需要的是:

background-image: url(...) center;
background-size: cover;

这是从 w3.org 网站上截取的漂亮插图:

最有趣的是convain 和cover。区别在于:

• contain - 使图像完全适合您的元素；
• cover - 调整图像大小以完全覆盖您的元素。