背景设置

最新推荐文章于 2023-12-10 08:58:44 发布

杨壹朝

最新推荐文章于 2023-12-10 08:58:44 发布

阅读量227

点赞数

分类专栏：前端学习文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44194855/article/details/88991345

版权

前端学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

背景介绍

设置背景样式：backgrou-color: #bfa；
设置背景图片;
使用background-image来设置背景图片
语法：background-image: url(相对路径)；
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
background-repeat用于设置背景图片的重复方式：
repeate：默认值，背景图片会双方向重复平铺
no-repeate：背景图片不会重复，有多大就会显示多大
repeate-x：背景图片沿水平方向重复
repeate-y：背景图片沿垂直方向重复
背景偏移与定位：
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中位置
可选值：
top bottom left right center中的两个值可以来指定背景图片的位置
top left 左上 bottom right 右下
如果只给出一个值，则第二个值默认是center也可以直接指定两个偏移量
第一个值是水平偏移量

如果指定一个正值，则图片会向右移动指定的像素
如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
如果指定的是一个正值，则图片会向下移动指定的像素
如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment用来设置背景图片是否跟随页面一起滚动
可选值：scroll，默认值背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body

具体代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按钮练习</title>
        <style type="text/css">
        /*
        做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验

        产生问题的原因：
            背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
            但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
            我们这个练习，一上来浏览器只会加载link.png
            由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
            当hover被触发时，浏览器才去加载hover.png
            当active被触发时，浏览器才去加载active.png
            由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况

        为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
        然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
        优点：
            1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
            2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
        */
            .btn:link{
                /*将a转换为块元素*/
                display: block;
                /*设置宽高*/
                width: 93px;
                height: 29px;
                /*设置背景图片*/
                background-image: url(img/btn/btn2.png);
                /*设置背景图片不重复*/
                background-repeat: no-repeat;
            }
            .btn:hover{
                /*当是hover状态时，希望图片可以向左移动*/
                background-position: -93px 0px;
            }
            .btn:active{
                /*当是active状态时，希望图片再向左移动*/
                background-position: -186px 0px;
            }
        </style>
    </head>
    <body>
        <!-- 创建一个超链接 -->
        <a href="#" class="btn"></a>
    </body>
    </html>