背景图片设置

作者: 幸而0407 | 来源:发表于2018-09-12 20:32 被阅读0次

设置背景图片及相关属性
CSS边框图片--跟着李南江学编程
24.css背景样式,背景图片,重复方式,是否随页面滚动,简写方
背景图片的使用
[Flutter]设置背景图片
CSS背景图设置
背景
背景
View设置大背景图片
CSS(下篇

精确控制背景图片在元素中的位置

可以把图片设置为元素的背景，而且也能让它铺满或者不铺满，那么我们同时也能将图片放到一个固定的位置。
需要通过background-position用来精确控制背景图片在元素中的位置。
通过三种方式来确定图片在水平方向和垂直方向的起点。

关键字：top right bottom left center
百分比
数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景与偏移量</title>
    <style>
        .box1{
            width: 1072px;
            height: 560px;
            background-color: red;
            margin: 0 auto;
            background-image: url(img/002.jpg);
            background-repeat: no-repeat;
            /*可以通过数值来指定相对位置*/
            background-position: 50px 50px;
            /*通过关键字来设置方向*/
            /*background-position: bottom right;*/
            /*background-position: left;*/
            /*通过设置页面的百分比来指定位置*/
            /*background-position: 50% 50%;*/
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

注意写对图片的路径，不然图片无法显示。
背景图片的固定

通过背景图片的固定，我们也能实现犹如网站的购物车图标，不会随着屏幕的滚动而变化。在设置背景图片的时候，最好是设置在<body>内，这样不会因为其他元素的滚动而消失。
CSS Sprite

CSS Sprites是一种网页图片应用处理方式。
好处：

通过这种方式我们可以将网页中的零星图片集中放到一张大图上，这样只需要网页发送一次请求。
一次请求便可以同时加载多张图片，大大提高了图片的加载效率，提高了访问效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <style type="text/css">

        /*如果我们在不同的状态时，传入三张图片，那么在点击时会闪烁，而且浏览器请求次数增加，每次都得传入图片，增加传输速度。*/
        /*不写图片的位置的时候，就是传入了固定的位置
        而且加载了三次，降低访问次数，增加流量。
        */
        /*只写图片位置的时候，就是传入了一张整合过得图片
        通过移动图片的位置来显示我们所需要的样子*/
        .btn:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image:url(img/btn.png);
            background-repeat: no-repeat;
        }
        .btn:hover{
            background-position: -93px 0px;
            /*background-image: url(img/hover.png);*/
        }
        .btn:active{
            background-position: -186px 0px;
            /*background-image: url(img/active.png);*/
        }
    </style>
</head>
<body>
    <a href='#' class="btn"></a>
</body>
</html>

上面代码中，要么写图片路径在hover 和 acitve中不写位移，那这就是传入三次图片，要么就是不写路径，通过传入一张整合以后的图片，来进行移动，实现我们想要看到的效果。提交加载速度。