background

知识精选,互联网文档计划

background 设置背景,可以使用图片,也可以设置渐变背景,也可以设置多个背景。
利用 backgound,我们可以实现多个好玩的效果。

语法 #

/* 使用 <background-color> */
background: green;
/* 使用 <bg-image> 和 <repeat-style> */
background: url("test.jpg") repeat-y;
/* 使用 <box> 和 <background-color> */
background: border-box red;
/* 将背景设为一张居中放大的图片 */
background: no-repeat center/80% url("../img/image.png");

更多信息,请参考:MDN - CSS - background

应用 #

固定背景效果 #

演示地址:https://codyhouse.co/demo/fixed-background-effect/index.html

渐变背景动画 #

See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.

实现磨砂玻璃效果 #

See the Pen CSS only frosted glass effect by Gregg OD (@GreggOD) on CodePen.

多背景图像视差 #

See the Pen CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium) on CodePen.

教程 #

参考文档 #

本文档采用知识共享 署名-相同方式共享 3.0协议

最后生成时间:2021/3/4 1:28:4