img { clip-path: inset(10px 20px 30px 40px); }
clip-path属性设置一个剪裁路径,用于裁剪图像。上述代码将定义一个选择器,其clip-path剪切了一个左上角留有10像素,右下角留有30像素的矩形,即图像的上、下、左、右各留有10、20、30、40像素。
div { background-image: url("your-image.png"); background-size: 50% 50%; background-repeat: no-repeat; }
background-image和background-size属性用于缩放和放置图像。上述代码将定义一个选择器,其background-image设置为“your-image.png”,并将background-size设置为50% 50%。这意味着,该图像将按其50%的原始大小显示,且其水平和垂直方向都将位于容器的中心。
通过这些CSS属性,您可以裁剪和缩放您的图片,以适应您的布局需要。