https://mp.weixin.qq.com/s?__biz=MzAwNjI1MzI3OQ==&mid=2648999624&idx=1&sn=b7ae12ab266b1df66c8d052b851996c3&chksm=83001978b477906ee0d7063169adc5827834b1e230a11a93cb0538f3c170d2f2e2e7ee716107&mpshare=1&scene=23&srcid=0111ddAtLg4LzhtHIpigfYFR&sharer_sharetime=1641865321555&sharer_shareid=3fbf667202e3571656770d85ec2d851f#rd

大家好。在这篇文章中,我将分享5个值得你牢记的CSS属性,它们将会在网页图片处理上给你很大的帮助。

它们分别是什么呢?一起来看看吧。

  1. Object-fit : cover
    这个属性可以让图片填充整个区域,同时保持高宽比例。这个技巧在处理个人资料图片时尤其有用。

图片

  1. Transform: scaleX(-1) / scaleY(-1)
    使用transform: scaleX(-1)可以水平翻转图像,scaleY(-1)则用于垂直方向。

图片

  1. Object-fit : contain
    用于包含所需尺寸的整个图片并保持高宽比例。此属性常用于制作横幅。

图片

  1. Filter: drop-shadow
    此属性用于为透明背景的图片添加阴影。

例如:filter: drop-shadow(30px 10px 4px #3a3a3a);

图片

30px表示目标的相对位置向右,负值则向左移动阴影。
10px表示目标的相对位置向上,负值则向底部移动阴影。
4px代表目标的模糊因子。

#3a3a3a代表目标的颜色。

  1. Filter: opacity
    此属性根据百分比增加图像的透明度。

图片

今天就到这里了,感谢大家的阅读,我们下次再见。

文档更新时间: 2022-01-11 09:51   作者:admin