CSS图像样式怎么设置

css

小亿

140

2023-10-11 03:00:25

栏目: 编程语言

CSS图像样式可以通过以下属性进行设置：

div {
background-image: url("image.jpg");
}

background-repeat：设置背景图像的重复方式。常见取值有no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）等。

div {
background-image: url("image.jpg");
background-repeat: no-repeat;
}

div {
background-image: url("image.jpg");
background-position: center;
}

div {
background-image: url("image.jpg");
background-size: cover;
}

object-fit：设置替换元素（如img、video、canvas）的填充方式。常见取值有contain（等比缩放，保持原始比例，完全适应容器）、cover（等比缩放，保持原始比例，完全填充容器）等。

img {
object-fit: cover;
}

filter：设置图像的滤镜效果。可以使用多个滤镜函数进行叠加，常见的滤镜函数有blur（模糊）、grayscale（灰度）、sepia（褐色）、brightness（亮度）等。

img {
filter: blur(5px);
}

以上是一些常见的CSS图像样式设置方法，根据实际需求可以选择合适的属性进行配置。

最新问答