【JavaWeb学习】CSS（背景）

原创已于 2022-05-15 10:08:39 修改 · 1.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2022-04-20 10:46:26 首次发布

web前端学习专栏收录该内容

25 篇文章

订阅专栏

这篇博客详细介绍了CSS中的背景样式，包括背景颜色、背景图片、背景重复、定位、范围、起源、尺寸和固定等属性。通过实例展示了如何设置背景图片、使用雪碧图技术和创建线性及径向渐变背景，强调了这些技巧在提升网页性能和用户体验上的作用。

背景

背景颜色
$⋅\cdot$ background-color
背景图片
$⋅\cdot$ background-image
$⋅\cdot$ 用 url() 引入图片路径；
$⋅\cdot$ 可以同时设置背景颜色和背景图片；
$⋅\cdot$ 如果背景图片小于元素，则背景图片会自动平铺把元素铺满；
$⋅\cdot$ 如果背景图片大于元素，那么背景图片无法完全显示；
$⋅\cdot$ 如果背景图片和元素一样大，那么一切都刚刚好。
背景重复方式
$⋅\cdot$ background-repeat
$⋅\cdot$ 可选值：
$\;$ repeat：默认值，沿着x和y双方向重复；
$\;$ repeat-x：沿 x 轴方向重复；
$\;$ repeat-y：沿 y 轴方向重复；
$\;$ no-repeat：不重复；
背景图片位置
$⋅\cdot$ background-position
$⋅\cdot$ 可选值：top，left，right，bottom，center；必须同时指定水平和垂直方向的两个值，不写的话默认center；
$⋅\cdot$ 也可以通过偏移量指定背景图片的位置：background-position: 10px 10px;
背景范围
$⋅\cdot$ background-clip
$⋅\cdot$ 可选值：
$\;$ border-box：默认值，背景会出现在边框下面；
$\;$ padding-box：背景不会出现在边框下面，只出现在内容区和内边距下面；
$\;$ content-box：背景只出现在内容区下面；
背景图片的偏移量的计算原点
$⋅\cdot$ background-origin
$⋅\cdot$ 可选值：
$\;$ padding-box：默认值，从内边距左上角开始计算；
$\;$ content-box：从内容区左上角开始计算；
$\;$ border-box：从边框左上角开始计算；
背景图片的尺寸
$⋅\cdot$ background-size
$⋅\cdot$ 可选值：
$\;$ 两个数字：第一个值是宽度，第二个值是高度；如果只写一个值，那么第二个值默认 auto，根据第一个值等比例缩放；
$\;$ cover：图片比例不变，将元素铺满；
$\;$ contain：图片比例不变，在元素中完整显示；
背景图片是否跟随元素移动
$⋅\cdot$ background-attachment
$⋅\cdot$ 可选值：
$\;$ scroll：默认值，背景跟随元素移动；
$\;$ fixed：背景固定在页面中，不随元素移动；
在这里插入图片描述

.back{
    width: 506px;
    height: 506px;
    background-color: rgb(245, 234, 244);
    background-image: url("../imgs/ssm_2.jpg");
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center center;
}

<body>
    <div class="back"></div>
</body>

简写属性 background
没有顺序要求，但是不熟悉时别用；备注：
$⋅\cdot$ background-size 必须写在 background-position 后面，并且用/隔开：background-position/background-size；
$⋅\cdot$ background-origin 必须写在 background-clip 前面；

雪碧图

解决图片闪烁问题：将多个小图片保存到一个大图片中，然后通过调整 background-position 来显示图片的不同部分，这样图片就可以同时加载到网页中，有效避免闪烁问题。这项技术在网页中应用十分广泛，被称为 CCS-Sprite，这种图被称为雪碧图。

使用步骤

确定要使用的图标；
测量图标大小；
根据测量结果创建一个元素；
将雪碧图设置为背景图片；
设置一个偏移量以显示正确的图片；

特点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验。

渐变

设置复杂的背景颜色，实现从一个颜色向其他颜色过渡的效果。
渐变是图片，需要通过 background-image 来设置。

线性渐变

$⋅\cdot$ linear-gradient()，颜色沿一条直线发生变化，颜色写几种都行，颜色默认平均分配；
$⋅\cdot$ 可以指定方向：to left， to right， to top， to bottom；
$⋅\cdot$ 也可以用旋转角度指定方向：xxxdeg，deg表示度数；
$⋅\cdot$ 可以手动指定渐变的分布情况，颜色后面跟上位置：linear-gradient(rgb(252, 235, 249) 50px, rgb(215, 136, 227) 70px)；
$⋅\cdot$ repeating-linear-gradient()，可以平铺的线性渐变，颜色后面跟上位置时，渐变范围只限制在这个范围内，然后平铺这段范围里的渐变，填满整个元素；此时background-repeat：no-repeat不起作用。
在这里插入图片描述

.back{
    float: left;
    width: 506px;
    height: 506px;
    background-image: url("../imgs/ssm_2.jpg");
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center center;
}
.background{
    width: 506px;
    height: 506px;
    background-image: linear-gradient(to right, rgb(252, 235, 249), rgb(215, 136, 227));
    /* background-image: linear-gradient(90deg, rgb(252, 235, 249), rgb(215, 136, 227)); */
}

<body>
    <div class="back"></div>
    <div class="background"></div>
</body>

径向渐变（放射）

$⋅\cdot$ radial-gradient()
$⋅\cdot$ 默认情况下，径向渐变的形状根据元素的形状来计算，比如正方形元素对应圆形渐变，矩形元素对应椭圆形渐变；
$⋅\cdot$ 可以手动指定径向渐变中心的大小：radial-gradient(渐变宽度渐变高度, 颜色位置，颜色位置，...)；
$⋅\cdot$ 或者用 circle 和 ellipse 指定形状；
$⋅\cdot$ 也可以手动指定渐变位置radial-gradient(渐变宽度渐变高度 at 宽度位置高度位置, 颜色位置，颜色位置，...)；
在这里插入图片描述

.background{
    width: 506px;
    height: 506px;
    background-image: radial-gradient(300px 500px, rgb(252, 235, 249), rgb(215, 136, 227), rgb(252, 235, 249));
}