15【背景渐变色】

最新推荐文章于 2024-08-11 22:28:32 发布

DSelegent

最新推荐文章于 2024-08-11 22:28:32 发布

阅读量7k

点赞数 4

分类专栏： html+css学习笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/DSelegent/article/details/126120564

版权

本文详细介绍了CSS中背景颜色、背景图片的使用，包括背景平铺、图片位置、固定背景、背景大小等。此外，还重点讲解了线性渐变和径向渐变的创建，帮助理解渐变方向和颜色分布。

摘要由CSDN通过智能技术生成

26.背景

26.1 背景颜色

background-color 属性定义了元素的背景颜色。

background-color: 颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color: transparent;

目前 CSS 还支持丰富的渐变色，但是某些浏览器不支持。

<!doctype html>
<html lang="zh-CN">

<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>渐变</title>
    <style>
        #grad1 {
     
            height: 200px;
            /* 浏览器不支持时显示 */
            background-color: red;
            /* 线性渐变 - 从上到下（默认情况下）*/
            background-image: linear-gradient(#e66465, #9198e5);
        }
    </style>
</head>

<body>
    <h3>线性渐变 - 从上到下</h3>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

    <div id="grad1"></div>

    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>

</html>

26.2 背景图片

background-image 属性描述了元素的背景图像，实际开发常用于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置（精灵图也是一种运用场景）。

background-image : none | url(url)

参数值	作用
`none`	无背景图（默认的）
`url`	使用绝对或相对地址指定背景图像

注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。

background-color: pink;
background-image: url(../images/logo.png);
/* 1、背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 2、默认情况下，背景图片是平铺的 */
/* background-repeat: repeat; */ /* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片区域会覆盖背景颜色 */

如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满
如果背景图片大小大于元素，则背景图片一部分会无法完全显示
如果背景图片大小等于元素，则背景图片会直接正常显示

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

26.3 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

注：平铺可以简单的理解为“重复”。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值	作用
`repeat`	背景图像在纵向和横向上平铺（默认的）
`no-repeat`	背景图像不平铺
`repeat-x`	背景图像在横向上平铺
`repeat-y`	背景图像在纵向上平铺