css笔记

_码农小小

已于 2024-09-13 16:41:48 修改

阅读量1.4k

点赞数 20

文章标签： css

于 2024-01-01 20:49:26 首次发布

本文链接：https://blog.csdn.net/sinat_41907918/article/details/129986267

版权

1.object-fit

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

属性值：

fill：默认，不保证保持原有的比例，内容拉伸填充整个内容容器

contain：保持原有尺寸比例，内容被缩放

cover：保持原有尺寸比例，但部分内容可能被剪切

none：保留原有元素内容的长度和宽度，也就是说内容不会被重置

scale-down：保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

initial：设置为默认值

inherit：从该元素的父元素继承属性

可参考：(28条消息) 使用 CSS object-fit 属性裁剪图片_"fit=\"scale-down"_优价实习的博客-CSDN博客

2.max-width: 100%和width:100%的区别

max-width：最大显示为其自身的100%(即最大只可以显示为自身那么大)

3.mix-blend-mode

定义一个元素的颜色如何与其父元素的颜色以及兄弟的颜色混合。（半透明效果、添加阴影、制作图片蒙版等）

属性值：

normal：默认值，使用正常的颜色混合模式

multiply：将两个颜色的值相乘，得到一个更暗的颜色。这通常用于创建阴影效果。
screen：将两个颜色的值相加，然后减去相乘的值，得到一个更亮的颜色。这通常用于创建高光效果。
overlay：根据背景颜色的亮度来选择颜色混合模式。如果背景颜色较暗，则使用 multiply 模式；如果背景颜色较亮，则使用 screen 模式。
darken：将两个颜色的值比较，使用较暗的那个颜色。
lighten：将两个颜色的值比较，使用较亮的那个颜色。
color-dodge：将前景色分解为 RGB 分量，并将每个分量分别除以（1 减去背景色的对应分量）。然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。
color-burn：将前景色分解为 RGB 分量，并将每个分量分别除以背景色的对应分量。然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。
difference：将前景色减去背景色的值，并取绝对值。这会导致一个反相的效果。
exclusion：将前景色和背景色的值相加，然后减去相乘的值的两倍。这通常用于创建反相效果。
hue：将前景色的色相（Hue）与背景色的饱和度（Saturation）和亮度（Lightness）混合。这可以用于在不改变亮度和饱和度的情况下改变颜色。
saturation：将前景色的饱和度与背景色的色相和亮度混合。这可以用于在不改变颜色的情况下改变饱和度。
color：将前景色的色相、饱和度和亮度与背景色混合。这可以用于在改变所有颜色属性的情况下改变前景色的颜色。
luminosity：将前景色的亮度与背景色的色相和饱和度混合。这可以用于在不改变颜色的情况下改变亮度。
mix-blend-mode：属性可以应用于任何具有背景颜色或背景图像的元素，包括文本、图像和 SVG 图形。通常情况下，您会将 mix-blend-mode 应用于子元素，使其与父元素或其他兄弟元素混合。