CSS：背景

十二春秋
165 阅读5分钟

背景图片background-image:

功能： 为元素设置一个背景图像
位置： 默认放置在元素的左上角
重复： 默认在垂直方向和水平方向重复
背景色： 可在设置背景图片时，设置一个可用的背景颜色，当背景图片不可用时可以使用背景色代替
默认的重复效果:（repeat） image.png 注意: 背景色和背景图片均会生效，当图片无法完整覆盖盒子时，背景色会一同显示，如：

image.png

属性值：

none 默认值

无背景图片显示

url('')

背景图像的url

linear-gradient() 线性渐变色

指定两种或多种颜色进行线性渐变，可设置方向

功能： 为元素设置线性渐变背景色,
默认：从上至下进行渐变
background-image: linear-gradient(aqua,pink);

image.png 渐变方向：
background-image: linear-gradient(180deg,red, yellow, blue);

image.png 135deg:

image.png 设置颜色渐变开始位置：
从图片高度的70%开始（从上往下）
background-image: linear-gradient(aqua,pink 70%); image.png 高度可以超出100%，也可以小于0
background-image: linear-gradient(aqua -30%,pink 60% ,fuchsia 150%);

image.png

repeating-linear-gradient()重复线性渐变

background-image: repeating-linear-gradient(135deg,aqua,pink 7%,fuchsia 10%);

image.png

radial-gradient()径向渐变色

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape: 径向渐变的形状

  • ellipse(默认)：椭圆
  • circle：圆 size 径向渐变的大小
  • farthest-corner(默认)：径向渐变的半径长度为圆心到距离圆心最远的角

image.png

  • closest-corner:圆心到距离圆心最近的角

image.png

  • farthest-side:圆心到距离最远的边

image.png

  • closest-side：圆心到距离最近的边

image.png position 渐变圆心的位置

  • center：中心
  • top： 顶部
  • bottom：底部
  • xx%：距离左侧边框的距离为
  • xx% xx%:距离左上角的距离（左右 上下） start-color, ..., last-color 渐变的起止颜色，可以向线性渐变一样在颜色后加百分数设置起始位置

repeating-radial-gradient()重复线性渐变

background-image: repeating-radial-gradient(circle , aqua, pink 10%, fuchsia 15%);

image.png

inherit

指定背景图片从父元素继承

设置多个背景图片

.example{
    width: 400px;
    height: 300px;
    background-image: url(../yuanshen/七七-倒.png), url(../yuanshen/钟离-天动万象.png),linear-gradient(45deg, rgb(202, 187, 54),rgb(250, 186, 9));
    background-position: left bottom, right top;
    background-repeat: no-repeat, no-repeat;
}

image.png

背景色 background-color

属性值

color

指定背景色

transparent

将背景色设为透明

inherit

背景图片的重复方式 background-repeat

属性值

repeat

图像将沿水平和垂直方向重复，可以通过修改background-position的方式，移动背景图片，防止出现大量图片被遮挡
多侧图片被遮挡： image.png

重新定位后的效果： image.png

no-repeat

背景图片不进行重复操作

repeat-x

只沿水平方向重复

repeat-y

只沿垂直方向重复

inherit

背景图片固定&滚动 background-attachment:

属性值

scroll （默认）

背景图片随着页面的滚动而滚动

fixed

背景图片不会随着页面的滚动而滚动

local

背景图片会跟着元素内容的滚动而滚动

initial

背景图片的background-attachment属性值不继承父元素，保持自身默认

inherit

继承父元素的属性值

背景的覆盖范围 background-clip

属性值

border-box(默认值)

宽：border+padding+width
高：border+padding+height
注： 不包含外边距

padding-box

宽：padding+width
高：padding+height
注： 不包含外边距和边框

content-box

宽：width
高：height

背景图片定位的起始位置 background-position

注： 在Firefox 和 Opera中，若设置background-position 属性，background-attachment属性值必须为fixed

属性值

top，right，bottom，left，center

通常为两个值，当只设1个值的时候，另一个值默认为center

x% y%

第一个值为水平方向，第二个是垂直方向
默认 值为0% 0%(左上角)
当只设一个值时，第二个值默认为50%

xpos ypos

第一个值为水平方向，第二个是垂直方向
单位可以是像素（0px 0px），也可以是其他任何CSS单位
可以喝 % 混合使用

inherit

背景图片的定位区域 background-origin

设置background-clip时，背景覆盖范围和背景图片的定位范围各自生效
background-position的生效范围
若background-attachment:fixed 则background-origin不生效,背景图片可能会消失

属性值

content-box

  • 生效范围：
    • 宽：width
    • 高：height

padding-box

  • 生效范围：
    • 宽：padding+width
    • 高：padding+height

border-box

  • 生效范围
    • 宽：border+padding+width
    • 高：border+padding+height

背景图片的大小 background-size

属性值

length

设置背景图片的宽度和高度。
第一个值设置宽度，第二个值设置高度。
若只给一个值，则第二个值默认为auto

percentage

根据背景定位区域(origin)宽高的百分比，显示背景图片

cover 无空白

此时，图片会保持纵横比，且大小会缩放到可以完全覆盖背景定位区域的最小大小
因为要求完全覆盖，所以图片可能会有部分无法显示（最小尺寸：即保持纵横比的情况下，尽量减少无法显示的部分）
图片底部有部分未被显示 image.png

contain 有空白

保持纵横比，图像缩放成适合背景定位的最大大小
图片会完整展示，但是定义的背景图片覆盖范围内，会有部分空白（最大尺寸：保持纵横比的情况下，尽量减少空白区域）

image.png

背景图片透明度问题

目前没找到有单独修改某元素背景图片透明度的方式，设置filter或者opacity会导致该元素内所有内容都会受到透明度的影响。
这边推荐直接用ps

avatar
文章
阅读
粉丝