CSS复习：渐变，opacity，透明度

最新推荐文章于 2024-08-31 14:58:50 发布

半浮名

最新推荐文章于 2024-08-31 14:58:50 发布

阅读量1.5k

点赞数 2

分类专栏： html,css,js基础知识文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51813155/article/details/121218602

版权

html,css,js基础知识专栏收录该内容

14 篇文章 1 订阅

订阅专栏

CSS CSS 渐变

- 1.CSS 渐变

1.CSS 渐变

background-image:linear-gradient（）；
使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：
线性渐变（向下/向上/向左/向右/对角线）
径向渐变（由其中心定义）

线性渐变 - 从上到下（默认）
下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：
background-image:linear-gradient(red,yellow);

代码：

<!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>
</head>




<style>




    div{width: 300px;
    
    height: 300px;
    background-image:linear-gradient(red,yellow);
    
    
    }
</style>
<body>
    









    <div></div>
</body>
</html>

效果图：
在这里插入图片描述

线性渐变 - 对角线
您可以通过指定水平和垂直起始位置来实现对角渐变。

下面的例子展示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色

background-image: linear-gradient(to bottom right, red, yellow);
从什么到什么位置，初颜色，未颜色
在这里插入图片描述
彩虹色多种颜色
从右边开始
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

代码：

<!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>
</head>




<style>




    div{width: 700px;
    
    height: 300px;
    /*background-image:linear-gradient(red,yellow);*/
    /*background-image: linear-gradient(to bottom right, red, yellow);
    */
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
    
    }
</style>
<body>
    









    <div></div>
</body>
</html>

效果图：
在这里插入图片描述

2.opacity，透明度
属性指定元素的不透明度/透明度。

值：0~1.

<!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>
</head>




<style>




    div{width: 400px;
    
    height: 301px;
    /*background-image:linear-gradient(red,yellow);*/
    /*background-image: linear-gradient(to bottom right, red, yellow);
    */
  /* background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
    */


    background-color: pink;
    opacity: 0.5;

    }
</style>
<body>
    









    <div></div>
</body>
</html>