CSS温习回顾—CSS背景

最新推荐文章于 2024-08-03 23:03:36 发布

ImmortalSYM

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量87

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/ImmortalSYM/article/details/117782413

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS温习回顾

CSS背景

background-image设置背景图片

—语法：background-image:url("背景图片路径")

—可以同时设定背景颜色background-color和背景图片，背景颜色将会成为图片的背景色；

—如果背景图片大小小于元素，则背景图片会自动在元素中平铺，将元素铺满；

—如果背景图片大小大于元素，将会有一部分背景无法完全显示；

—如果背景图片大小和元素一样大，则会直接正常显示；
background-repeat设置背景的重复方式

—可选值

—repeat：默认值，背景会沿着x轴和y轴双向平铺；

—repeat-x：沿着x轴重复平铺；

—repeat-y：沿着y轴重复平铺；

—no-repeat：背景图片不重复平铺；
background-position设置背景图片的位置

—语法：使用方位词，必须要同时指定两个值，如果只写一个值，第二个值默认为center；

background-position:top/right/bottom/left/center top/right/bottom/left/center;

—或者通过偏移量来指定背景图片的位置，需要指定两个值；background-position:水平偏移量垂直偏移量;

—水平偏移量（正值）越大，越往右偏移；

—垂直偏移量（正值）越大，越往下偏移；

—可以设置负值，其就会往反方向移动；（雪碧图中经常使用负值设置图片位置）
background-origin：设置背景图片偏移量计算的原点

—可选值：

—padding-box：默认值，背景图片的偏移从内边距开始计算；

—content-box：背景图片的偏移从内容区开始计算；

—border-box：背景图片的偏移从边框处开始；
background-clip：设置背景图片的覆盖范围

—可选值：

—border-box：背景图片会从边框开始覆盖；

—padding-box：背景图片会从内边距开始覆盖，不会出现在边框下面；

—content-box：背景图片会从内容区开始覆盖，不会出现在内边距和边框下面；

—注意，background-clip的可选值和background-origin的可选值是相同的，但是两者作用完全不同；
background-size设置背景图片的尺寸

—语法：

—background-size:width height;可以只设置一个值，第二值默认为auto，会等比例缩放；

—background-size:cover;图片比例不变，将会在水平或者垂直方向上将元素铺满；

—background-size:contain;图片比例不变，将图片在元素中完整显示；
background-attachment设置背景图片是否跟随元素移动

—可选值：

—scroll：默认值，背景图片会跟着元素移动；

—fixed：背景图片会固定在页面中，不会跟随元素移动；
background背景简写属性

—所有背景相关的样式都可设置；

—注意：background-size必须写在background-position后面，并且使用 / 隔开；如果不写background-position，只写background-size，无效果；

—注意：background-origin和background-clip的可选值是相同的，在设置的时候，必须满足background-origin在前面，background-clip在后面；
```
<style>
    div{
        background:#bfa url() top right/contain padding-box border-box;
    }
</style>
```
雪碧图

—图片属于网页中的外部资源，外部资源需要浏览器单独发送请求加载；

—浏览器加载外部资源时是按需加载的，用则加载，不用则不加载；

—加载过程需要一定时间，因此在第一次访问浏览器的时候，会在切换过程出现闪现效果，这是因为图片在切换的时候，加载图片需要一定的时间；

—解决方法：可以使用多张状态图在一张上的背景图片；这样图片就会同时加载到网页中，就可以有效避免切换出现闪烁的问题；然后利用background-position调整背景图片位置，以显示不同背景图片状态；这个在网页中应用十分广泛，被称为CSS-Sprite，这种图称为雪碧图；

—雪碧图使用步骤：

—先确定要使用的图片文件；

—测量要使用的图片大小；

—根据测量结果，创建一个同样大小的元素；

—将雪碧图设置为元素背景图片；

—设置偏移量background-position以显示正确的图片；

—雪碧图的特点：一次性将多个图片加载进页面，降低浏览器请求次数，加快访问速度，提升用户体验；
背景渐变

通过渐变可以设置一些复杂的颜色，可以实现从一个颜色向其他颜色过渡的效果；

！！！渐变是图片，需要通过background-image设置；
线性渐变linear-gradient()

—颜色沿着一条直线（水平方向或者垂直方向）发射渐变效果；

—可以指定渐变方向

—to right 由左向右

—to left 由右向左

—to bottom 由上向下（默认值）

—to top 由下向上

— deg 表示度数，默认情况下为180deg；

— turn 表示圈数，1turn=360deg；

—渐变可以同时指定多个颜色，默认情况下，多个颜色平均分布；也可以手动指定颜色开始渐变的位置；

例如：
```
<style>
 div{
     /*表示红色从50px开始渐变,像素指定颜色开始的位置，蓝色最开始的位置是100px*/
     background-image:linear-gradient(red 50px,blue 100px);
 }
</style>
```
—repeating-linear-gradient()：表示平铺的线性渐变效果，空白处都是渐变效果，此时background-repeat:no-repeat;不起作用；
径向渐变radial-gradient()

—默认情况下，径向渐变圆心的形状是根据元素形状计算的；如果元素是正方形，对应径向渐变是圆形；如果元素是长方形，对应径向渐变是椭圆形；

—可以手动指定径向渐变的大小

—可选值

—circle：正圆；

—ellipse：椭圆；

例如：
```
background-image:radial-gradient(circle,red,yellow);
```
—可以指定渐变的位置，利用at设置圆心位置；

例如：
```
background-image:radial-gradient(100px,100px at 0 0,red,yellow);
```
—语法：

background-image:radial-gradient(大小 at 位置，颜色位置，颜色位置)

大小可选值：circle圆形、ellipse椭圆形、closest-side近边、closest-corner近角、farthest-side远边、farthest-corner远角；

位置可选值：top right bottom left center 像素值；
以上为背景相关的常用样式，具体详细的属性可以查阅CSS文件！！！

ImmortalSYM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS温习回顾—CSS背景

CSS温习回顾CSS背景background-image设置背景图片—语法：background-image:url("背景图片路径")—可以同时设定背景颜色background-color和背景图片，背景颜色将会成为图片的背景色；—如果背景图片大小小于元素，则背景图片会自动在元素中平铺，将元素铺满；—如果背景图片大小大于元素，将会有一部分背景无法完全显示；—如果背景图片大小和元素一样大，则会直接正常显示；background-repeat设置背景的重复方式—可选值 —repe
复制链接

扫一扫

专栏目录