背景尺寸位置裁切和CSS渐变

最新推荐文章于 2023-04-06 15:25:47 发布

九阈

最新推荐文章于 2023-04-06 15:25:47 发布

阅读量164

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/weixin_46048542/article/details/119830514

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

背景尺寸位置裁切
**background-size:**规定背景图像的尺寸。
在这里插入图片描述

background-size: 200px 200px;

background-size: cover;

在这里插入图片描述

background-size: contain;

在这里插入图片描述
background-origin:背景图的填充位置。默认值: padding-box
值描述
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
background-clip背景图的裁切位置
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。
注意：复合样式的时候，第一个是位置，第二个是裁切

background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat;background-origin: padding-box;background-clip: content-box;

等价于

background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat  padding-box content-box;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 500px;height: 400px;border: 40px solid red;padding: 50px;background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat;
        /* background-size: 200px;} */
        background-size: contain;}
        .box2{width: 500px;height: 400px;border: 40px solid red;padding: 50px;background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat;background-origin: padding-box;background-clip: content-box;
        }
        /* .box2{width: 500px;height: 400px;border: 40px solid red;padding: 50px;background: url(http://img95.699pic.com/element/40101/3325.png_300.png) no-repeat  padding-box content-box;
        } */
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

CSS渐变
linear-gradient:线性渐变，需要添加到background-image
属性上，渐变的0度是在页面在下边，正值会按照顺时针旋转，负值换逆时针旋转

background-image: linear-gradient(red,blue,yellow,green);

在这里插入图片描述
渐变轴为90度，从蓝色渐变到红色

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

在这里插入图片描述
从右下到左上、从蓝色渐变到红色

 background-image: linear-gradient(to left top, blue, red);

在这里插入图片描述
/从下到上，前25%为红色、高度25%位置到75%位置是红色渐变开始蓝色结束，后25%为蓝色。

 background-image: linear-gradient(red 25%,blue 75%);

在这里插入图片描述
radial-gradient:径向渐变跟上面一样

background-image: radial-gradient(red 25%,blue 50%,yellow 75%);}

在这里插入图片描述
综合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 300px;height: 300px;border: 1px black solid;
        /* background-image: linear-gradient(red,blue,yellow,green);} */
        background-image: linear-gradient(red 25%,blue 75%);}
        .box1{width: 300px;height: 300px;border: 1px black solid;
        background-image: radial-gradient(red 25%,blue 50%,yellow 75%);}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

渐变的加载进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress{width: 300px;height: 30px;border: 1px black solid;margin: 100px;background-image: linear-gradient(to right top,blue 25%,yellow 50%,red 75%,orange 100%);background-size: 30px;
        animation: move infinite 2s linear;}
        @keyframes move {
            0%{background-position: 0.0;}
            100%{background-position: 300px 0;}
        }
    </style>
</head>
<body>
    <div class="progress"></div>
</body>
</html>

在这里插入图片描述

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景尺寸位置裁切和CSS渐变

背景尺寸位置裁切**background-size:**规定背景图像的尺寸。background-size: 200px 200px;background-size: cover;background-size: contain;background-origin:背景图的填充位置。默认值: padding-box值描述padding-box 背景图像填充框的相对位置border-box 背景图像边界框的相对位置content-box
复制链接

扫一扫