CSS背景图片高级应用-优快云博客

本文链接：https://blog.youkuaiyun.com/lowerxiaoshen/article/details/76598728

背景处理

默认加载原图，图片左上角和标签的左上角对齐

图片

设置背景图片：

background-image: url(3.jpg);

设置背景图片加载大小，百分比（像素也可以）：

background-size: 100% 100%;

设置图片不重新加载（也可以只在x方向和y方向上加载填充 background-repeat: repeat-y;）

background-repeat: no-repeat;

设置图片的位置（即是背景图片中心在标签的位置），百分比，像素都可以：

background-position: 30% 50%

设置图片

背景颜色（图片）-线性渐变

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
颜色大于等于2个

线性渐变：

background-image: linear-gradient(red,blue)

设置渐变的宽度：

background-image: linear-gradient(red 50%,blue)

设置从哪个方向开始渐变：

background-image: linear-gradient(to right,red blue)

设置角度;

background-image: linear-gradient(10deg red ,blue)

径向渐变：(用法和线性渐变一样)

background-image: radial-gradient(red,blue);

从大图中抠小图：

示意图：

这里写图片描述

一个实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景图片</title>
        <style media="screen">
            div{
                /*设置一个小框，用于加载小图*/
                height: 100px;
                width: 100px;

                border: 2px solid red;

                background-image: url(144.jpg);
                /*设置图片不重新加载*/
                background-repeat: no-repeat;
                /*设置这个图片的大小*/
                background-size: 200px 200px;
                /*设置这个图片偏移情况*/
                background-position: -100px -100px;


            }
        </style>
    </head>
    <body>
        <div class="">
        </div>
    </body>
</html>