CSS3——背景与渐变

最新推荐文章于 2024-08-21 09:04:44 发布

懒羊羊大王呀

最新推荐文章于 2024-08-21 09:04:44 发布

阅读量586

点赞数 7

分类专栏： CSS 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/m0_73777400/article/details/141113179

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS3——背景与渐变

背景

background-image

可以有多个背景，但是只会显示最上层的那个。但是下面的示例可以使两个同时显示：

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

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

其实黄色背景就只有左上角一丢丢大，然后repeat平铺过来的，花朵背景没有被覆盖的原因是：

background-image: url(img_flwr.gif), url(paper.gif)设置背景图片时，最前面的会覆盖后面的，由于花朵背景在前面，所以是花朵盖住了黄色背景。

background-size

规定背景长宽。

/* 第一种 */
div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

/* 第二种 */
div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

background-origin

规定背景图片的位置——border-box、padding-box(默认)、content-box。值为哪个，图片的最左端就默认与哪个的最左端对齐。

注意：如果背景图像background-attachment是"固定"，这个属性没有任何效果。
在这里插入图片描述

background-clip

规定背景的绘制区域。与background-origin的值和示意图一致。

值	说明
`border-box`	默认值。背景绘制在边框方框内（剪切成边框方框）。
`padding-box`	背景绘制在衬距方框内（剪切成衬距方框）。
`content-box`	背景绘制在内容方框内（剪切成内容方框）。

渐变

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变在线工具：渐变在线工具。

渐变相关属性：background-image

background-image

值	说明
`url('URL')`	图像的URL
`none`	无图像背景会显示。这是默认
`linear-gradient()`	创建一个线性渐变的 “图像”(从上到下)
`radial-gradient()`	用径向渐变创建 “图像”。 (center to edges)
`repeating-linear-gradient()`	创建重复的线性渐变 “图像”。
`repeating-radial-gradient()`	创建重复的径向渐变 “图像”
`inherit`	指定背景图像应该从父元素继承

linear-gradients线性渐变

最基础的语法：

#div{
    background-color: #ddd;	/* 浏览器不支持渐变时显示 */
    background-image: linear-gradients(to right top, red, green, yellow, blue);	
    /* 第一个参数是方向，默认自上而下，既可以是 to 方向值，也可以是角度 */
    /* 后面表示颜色的参数可以有多个，表示中途停顿点 */
}

角度的效果如图：

#div{
    background-image: linear-gradients(0deg, #fff, #ddd);	
    /* 角度的单位可以省略，范围超过180的部分比如：既可以用 270 也可以用-90 */
}

在这里插入图片描述

如果像让颜色加上透明度，那么就是用 rgba设置颜色。

如果不想均匀渐变，那么就可以在每个停顿点之后添加百分比或者像素值

#grad1 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(red, yellow 10%, green 20%); 
}
/* 起始位置是 red，到容器的 10% 时，是yellow，到达容器的 20% 时，是green，然后后面就一直是green */

重复的线性渐变

#grad1 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
}
/* 起始位置是 red，到容器的 10% 时，是 yellow，到达容器的 20% 时，是 green，然后就重复这个操作，直至容器充满 */

#grad1 {
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background: repeating-linear-gradient(90deg, #fff, #fff 10px, #000 10px, #000 20px);
}
/* 设置斑马纹效果，这个效果其实没有多高级，就是两个相邻的渐变色是一样的，所以这个区域之间的颜色就是一样的 */

在这里插入图片描述

radial-gradient径向渐变

与线性渐变不同的是，方向换成了形状——椭圆形ellipse（默认值）、圆形circle

下面介绍以下radial-gradient的另一个参数size，后面紧跟以下关键字之后，还要跟 at 坐标

size的值	描述
`closest`	渐变将扩展到离圆心最近的边缘。这会创建一个更紧凑的渐变效果，渐变颜色会集中在渐变区域的中心附近。
`farthest-side`	渐变将扩展到离圆心最远的边缘。这会创建一个更扩散的渐变效果，渐变颜色会从中心向外扩散到元素的边缘。
`closest-corner`	渐变将扩展到离圆心最近的角落。这会创建一个以角落为中心的渐变效果，渐变颜色会从角落开始，向中心和对面的边缘扩散。
`farthest-corner`	渐变将扩展到离圆心最远的角落。这会创建一个从角落到对角角落的渐变效果，渐变颜色会从一角开始，覆盖到对角的角落。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>径向渐变</title> 
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); 
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); 
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); 
}
</style>
</head>
<body>

<h3>径向渐变 - 不同尺寸大小关键字的使用</h3>

<p><strong>closest-side：</strong></p>
<div id="grad1"></div>

<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>

<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div>

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

</body>
</html>