当前位置：首页 > news >正文

CSS 背景、阴影和混合模式

news 2025/9/14 13:31:16

网站的好坏在于细节，在实现页面里某个组件的布局并写完样式之后，不要急着继续，有意识地训练自己，以挑剔的眼光审视刚刚完成的代码。

1 背景与渐变

background-image	指定文件或者生成的颜色渐变为背景图片。
background-origin	用于确定背景相对于元素的边框盒、内边框盒（初始值）或内容盒子来定位。图 background-origin 的三个值效果
background-clip	指定背景是否应该填充边框盒（初始值）、内边距框盒或内容盒。图 background-clip 的三个值效果
background-position	设置背景图的初始位置。
background-size	指定元素内背景图片的渲染尺寸。使用百分位的时候，根据background-origin 指定的位置来确定其元素内容大小。例如，上面background-origin的三个效果值中，指定的background-size 都为100%。
background-repeat	决定在需要填充整个元素时，是否平铺图片。
background-attachment	指定背景图片是随着元素上下滚动（初始值），还是固定在视口区域。（使用fixed值会对页面性能产生负面影响。） fixed: 固定在视口区域，此时背景的background-origin 参照的是视口。 scroll: 随着元素滚动。如果该元素允许滚动（overflow: auto），那么背景也不会滚动。 local: 随着元素滚动，如果该元素允许滚动，那么背景也会跟着滚动。图 background-attachment 的三个值效果
background-color	指定纯色背景，渲染到背景图片下方。

表 background属性的组成

1.1 渐变

background-image 可以接受一个渐变函数。

图渐变函数

1.1.1 渐变角度

linear-gradient 的第一个参数用于定义渐变的角度。可以使用to top、to bottom、to bottom right。也可以使用更准确的单位。0deg 表示垂直向上，更大值会沿着顺时针变化，因此90deg 代表向右渐变（to right），180deg 表示to bottom。

rad	弧度，一个完整的圆是2π。
turn	环绕圆周的圈数。1 turn = 360deg。
grad	百分度。100 grad 相当于 90 deg(度).

表指定渐变方向的其他单位

图渐变角度与方向的变化

1.1.2 多个颜色节点

一个渐变可以接受任意数量的颜色节点，节点之间通过逗号分隔。如果不知道这些节点的位置，则会自动均匀平铺这些颜色节点。节点位置可以通过百分号或者px来指定，跟在颜色值后面，空格符隔开。

图多个颜色节点实现条纹

1.1.3 重复渐变

对于重复渐变，最好使用特定长度而不是百分比。

图重复渐变

1.1.4 径向渐变

线性渐变是从元素的一端开始，沿着直线过度到另一端，而径向渐变不同，它是从一个点开始，全方位向外扩张。

图径向渐变的例子

2 阴影

阴影是一种可以为网页增加立体感的特效。有两个属性可以创建阴影，box-shadow 可以为元素盒子生成阴影，text-shadow 可以为渲染后的文字生成阴影。

默认情况下，阴影与元素的大小和尺寸相同。如果元素设置了border-radius，那么阴影相应地也会有圆角。阴影的水平偏移量(x)、垂直偏移量(y)和颜色都不可或缺。还有两个值是可选的：模糊半径和扩展半径。

box-shadow: Xpx Ypx 模糊半径px 扩展半径px color;

而text-shadow 只有4个参数（模糊半径可选）。没有扩展半径这个参数。

图阴影效果

2.1 拟物化设计与扁平化设计

拟物化设计：把屏幕上的元素设计得如同真实世界的实物。追求尽量贴近真实世界。

扁平化设计：扁平化设计选择接受现代社会已经日益数字化的事实。扁平化设计讲究色彩明快统一、外观简洁明了，这就意味着尽量少用渐变、阴影和圆角。

中庸设计：介于扁平化设计与拟物化设计之间。

图三种不同的设计效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="container"><div class="con"><button class="btn">Sign up now</button><div>拟物化</div></div><div class="con"><button class="btn">Sign up now</button><div>扁平化</div></div><div class="con"><button class="btn">Sign up now</button><div>中庸</div></div>
</div>
</body>
</html>
<style>.container {display: flex;padding-top: 30px;}.con {margin-left: 40px;text-align: center;}.btn {padding: 1em;border: 0;font-size: 0.8rem;color: white;border-radius: 0.5em;margin-bottom: 15px;}.con:nth-child(1) .btn {background-image: linear-gradient(to bottom,#57b,#148);box-shadow: 0.1em 0.1em 0.5em #124;}.con:nth-child(1) .btn:active {box-shadow: inset 0 0 0.5em #124,inset 0 0.5em 1em rgba(0,0,0,0.4);}.con:nth-child(2) .btn {background-color: #57b;box-shadow: 0 0.2em 0.2em rgba(0,0,0,0.15);}.con:nth-child(2) .btn:hover {background-color: #456ab6;}.con:nth-child(2) .btn:active {background-color: #148;}.con:nth-child(3) .btn {background-color: #57b;box-shadow: 0 0.4em #148;text-shadow: 1px 1px #148;}.con:nth-child(3) .btn:active {background-color: #456ab6;transform: translateY(0.1em);box-shadow: 0 0.3em #148;}</style>

3 混合模式

混合模式用来控制叠放的图片怎样融合在一起。

变暗	multiply	前景色越亮，后景色显示出来的越多。
	darken	选择两个颜色中较暗的那个。
	color-burn	加深背景色，增加对比度。
变亮	screen	前景色越暗，背景色显示出来的越多。
	lighten	选择两个颜色中较亮的那个
	color-dodge	加亮背景色，降低对比度。
对比	overlay	对暗色使用multiply，对亮色使用screen，以增加对比度，对比效果较柔和。
	hard-light	大幅度增加对比度，有点像叠加，但是使用加强版multiply或者screen,对比效果明显。
	soft-light	有点类似hard-light，但是使用burn/dodge代替multiply/screen。
复合	Hue	将上层颜色的色相混合到下层颜色上。
	saturation	将上层颜色的饱和度复合到下层颜色上。
	luminosity	将上层颜色的明度混合到下层颜色上。
	color	将上层颜色的色相和饱和度混合到下层颜色上。
比较	difference	从亮色中减去暗色。
比较	exclusion	类似于difference，但对比度稍弱。

表混合模式的五大类

图 15种混合模式效果

3.1 实际应用

混合模式实际应用有：

使用某种颜色或渐变为图片着色。
为图片增加纹理效果，比如划痕或者老胶片放映时的颗粒感等。
缓和、加深或减小图片的对比度，使图片上的文字更具可读性。
在图片上覆盖一条文字条幅，但是还是想让图片完整显示。

图纹理效果

3.1.1 融合混合模式

background-blend-mode属性只能局限于元素的背景使用。mix-blend-mode可以融合多个元素。

图融合混合模式效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="blend"><h1>融合混合模式</h1>
</div>
</body>
</html>
<style>.blend {background-image: url("../asset/animal1.jpeg");background-size: 100%;width: 200px;height: 200px;display: flex;align-items: center;}.blend > h1 {margin: 0;font-size: 2rem;text-align: center;mix-blend-mode: hard-light;background-color: #c33;color: #808080;border: 0.1em solid #ccc;}
</style>