我的前端学习笔记

CSS背景

2020-05-10  本文已影响0人  Juha

背景颜色

background-color

属性值即为颜色值,默认值为transparent,即透明无颜色

背景图片

background-image
可以是多个,第一个图片是图层首层,也可以叠加背景颜色

背景图片

背景是否平铺
background-repeat


平铺方式

同步滚动
background-attachment
默认是scroll,即内容滚动背景不动,如果是local则是内容与背景同步滚动。fixed基本上不用,参照物是整个窗口,和这个容器无关系。


背景与内容是否同步滚动

背景的位置
background-position

背景位置 position在雪碧图中的应用

画出一个线性渐变图片背景
linear-gradient()


线性渐变

画出一个圆形渐变图片背景
radial-gradient()

画出圆形渐变图片背景

重复画出的渐变
repeating-*-gradient


重复线性渐变
重复圆形渐变

背景位置的属性
background-origin
默认是padding-box
即坐标中的(0,0)点是以哪个box的左上角为准。

背景相对默认位置是padding-box 可以改为border-box或者content-box

背景裁剪
background-clip
保留哪个box的内容


背景裁剪

背景大小
background-size


背景大小

背景怎么写

背景合起来写
上一篇下一篇

猜你喜欢

热点阅读