css3背景与渐变

最新推荐文章于 2023-09-26 00:25:57 发布
最新推荐文章于 2023-09-26 00:25:57 发布
阅读量511 收藏
点赞数
分类专栏： 前端基础入门 css/css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Allisa_yan/article/details/88989519
版权
本文详细介绍了CSS3中的背景特性，包括背景图像区域、定位、大小设置，特别是多重背景图像的使用。同时，深入讲解了线性渐变和径向渐变，以及如何在IE浏览器中实现渐变效果，提供了具体的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

*** css3背景 ***

  • 背景图像区域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clip</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
div {
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid transparent;  /*边框透明*/
    background: url('bg1.jpg') no-repeat center center;
    background-clip: border-box;
    background-clip: padding-box;
    background-clip: content-box;
}
span.div_border {   /*虚拟边框*/
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid rgba(255, 0, 0, .25);
}
span.div_padding {    /*虚拟div填充*/
    position: absolute;
    top: 50px;
    left: 50px;
    width: 800px;
    height: 400px;
    border: 50px solid rgba(255, 255, 0, .25);
}
</style>
</head>
<body>
<div></div>
<span class="div_border"></span>
<span class="div_padding"></span>
</body>
</html>

 

  • 背景图像定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clip</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
div {
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid transparent;
    background: url('bg1.jpg') no-repeat 50px 100px;
    background-origin: border-box;
    background-origin: padding-box;
    background-origin: content-box;
}
span.div_border {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid rgba(255, 0, 0, .25);
}
span.div_padding {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 800px;
    height: 400px;
    border: 50px solid rgba(255, 255, 0, .25);
}
</style>
</head>
<body>
<div></div>
<span class="div_border"></span>
<span class="div_padding"></span>
</body>
</html>

 

  • 背景图像大小

A、length，设置背景图片的高和宽

B、cover，把背景图片扩展至足够大，以使背景图片完全覆盖区域

C、percentage，以父元素的百分比来设置图像的宽度和高度

D、contain，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Size</title>
<style type="text/css">
div {
	width: 800px;
	height: 500px;
	background: url("bg1.jpg") no-repeat;
	background-size: contain;  /*将背景图片等比缩放至某一边紧贴容器边缘为止*/
	background-size: cover;   /*将背景图片等比缩放以填满容器*/
	background-size: 800px 500px;
	background-size: 800px;  /*如果只写一个值，则宽会显示800，高度会自动缩放合适大小*/
	background-size: 50% 50%;
	background-size: 50%;
	background-size: 100% 100%;
	background-size: 100%;  /*只写一个值，默认第二个值为auto，图片会被压缩跟div一样大*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

  • 多重背景图像

 // 前面图片会依次覆盖

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Size</title>
<style type="text/css">
div {
    width: 800px;
    height: 500px;
    background-image: url('bg2.png'), url('bg1.jpg');
    background-image: url('bg1.jpg'), url('bg2.png');
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

  • 背景属性整合

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Size</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
div {
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid transparent;
    /*background: color position size repeat origin clip attachment image;*/
    background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');
    /*建议如下书写方式：*/
    background: #abcdef url('bg1.jpg') no-repeat center center;
    background-size: 50%;
    background-origin: content-box;
    background-clip: content-box;
    background-attachment: fixed;
}
span.div_border {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid rgba(255, 0, 0, .25);
}
span.div_padding {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 800px;
    height: 400px;
    border: 50px solid rgba(255, 255, 0, .25);
}
</style>
</head>
<body>
<div></div>
<span class="div_border"></span>
<span class="div_padding"></span>
</body>
</html>

 

*** css3渐变 ***

  • 线性渐变

 // direction-方向

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 从上到下（默认情况）</title>
<style type="text/css">
div {
	width: 800px; height: 500px;
	background: -webkit-linear-gradient(red, blue);   /*兼容性*/
	background:    -moz-linear-gradient(red, blue);
	background:      -o-linear-gradient(red, blue);
	background:         linear-gradient(red, blue);   /*从上红到下蓝*/

        background: -webkit-linear-gradient(left, red , blue);  /*从左开始到右*/
	background:    -moz-linear-gradient(right, red, blue);  /*结尾是右边*/
	background:      -o-linear-gradient(right, red, blue);
	background:         linear-gradient(to right, red , blue);  /*到达右边*/

        background: -webkit-linear-gradient(left top, red, yellow, blue);/*从左上角开始*/
	background:    -moz-linear-gradient(right bottom, red, yellow, blue);/*右下角结束*/
	background:      -o-linear-gradient(right bottom, red, yellow, blue);/*右下角结束*/
	background:         linear-gradient(to right bottom, red, yellow, blue);/*到达右下角*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 使用角度</title>
<style type="text/css">
div {
	width: 800px; height: 500px;
	background: -webkit-linear-gradient(135deg, red, yellow, blue);
	background:    -moz-linear-gradient(135deg, red, yellow, blue);
	background:      -o-linear-gradient(135deg, red, yellow, blue);
	background:         linear-gradient(135deg, red, yellow, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

// 第一个颜色不写默认0%，最后一个不写默认100%

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 颜色结点</title>
<style type="text/css">
div {
	width: 800px; height: 500px;
	background: -webkit-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
	background:    -moz-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
	background:      -o-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
	background:         linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);

        background: -webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
	background:    -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
	background:      -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
	background:         linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);

        background: -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
	background:    -moz-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
	background:      -o-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
	background:         linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
</style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 使用透明</title>
<style type="text/css">
div {
	width: 800px; height: 500px;
	background: -webkit-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
	background:    -moz-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
	background:      -o-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
	background:         repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

  • 径向渐变（径-半径）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 颜色结点均匀分布（默认情况）</title>
<style type="text/css">
div {
	width: 800px; height: 500px;
	background: -webkit-radial-gradient(red, blue);
	background:    -moz-radial-gradient(red, blue);
	background:      -o-radial-gradient(red, blue);
	background:         radial-gradient(red, blue);

        background: -webkit-radial-gradient(red 50%, blue 70%);
	background:    -moz-radial-gradient(red 50%, blue 70%);
	background:      -o-radial-gradient(red 50%, blue 70%);
	background:         radial-gradient(red 50%, blue 70%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

【注意】：如果设置宽高一样，那参数不论设置为ellipse还是circle，显示效果均为圆形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 设置形状</title>
<style type="text/css">
div {
	width: 800px; height: 500px;
	background: -webkit-radial-gradient(circle, red, blue);
	background:    -moz-radial-gradient(circle, red, blue);
	background:      -o-radial-gradient(circle, red, blue);
	background:         radial-gradient(circle, red, blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 不同尺寸大小关键字的使用</title>
<style type="text/css">
div.closest-side {
	width: 300px; height: 200px; margin: 50px;
	background: -webkit-radial-gradient(30% 70%, closest-side, red, blue);/*第一个参数为圆心位置*/
	background:    -moz-radial-gradient(30% 70%, closest-side, red, blue);
	background:      -o-radial-gradient(30% 70%, closest-side, red, blue);
	background:         radial-gradient(30% 70%, closest-side, red, blue);
}
div.farthest-side {
	width: 300px; height: 200px; margin: 50px;
	background: -webkit-radial-gradient(30% 70%, farthest-side circle, red, blue);
	background:    -moz-radial-gradient(30% 70%, farthest-side circle, red, blue);
	background:      -o-radial-gradient(30% 70%, farthest-side circle, red, blue);
	background:         radial-gradient(30% 70%, farthest-side circle, red, blue);
}
div.closest-corner {
	width: 300px; height: 200px; margin: 50px;
	background: -webkit-radial-gradient(30% 70%, closest-corner, red, blue);
	background:    -moz-radial-gradient(30% 70%, closest-corner, red, blue);
	background:      -o-radial-gradient(30% 70%, closest-corner, red, blue);
	background:         radial-gradient(30% 70%, closest-corner, red, blue);
}
div.farthest-corner {
	width: 300px; height: 200px; margin: 50px;
	background: -webkit-radial-gradient(30% 70%, farthest-corner, red, blue);
	background:    -moz-radial-gradient(30% 70%, farthest-corner, red, blue);
	background:      -o-radial-gradient(30% 70%, farthest-corner, red, blue);
	background:         radial-gradient(30% 70%, farthest-corner, red, blue);
}
</style>
</head>
<body>
<div class="closest-side"></div>
<div class="farthest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-corner"></div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变 - 重复渐变</title>
<style type="text/css">
div {
    width: 800px; height: 500px;
    background: -webkit-repeating-radial-gradient(red 0%, blue 10%, red 20% );
    background:    -moz-repeating-radial-gradient(red 0%, blue 10%, red 20% );
    background:      -o-repeating-radial-gradient(red 0%, blue 10%, red 20% );
    background:         repeating-radial-gradient(red 0%, blue 10%, red 20% );
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

*** IE浏览器渐变 ***

// 颜色必须是 十六进制

// gradientType=0（从上至下）、1（从左到右）、2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IE6-8</title>
<style type="text/css">
div {
	width: 800px;
	height: 500px;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=2 );
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变 - 特殊案例</title>
<style type="text/css">
div {
	width: 800px; height: 500px; background: #abcdef; background-size: 50px 50px;
    background-image:
    	-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
    	-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
    	-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
    	-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
    background-image:
        -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
        -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        -moz-linear-gradient(45deg, transparent 75%, #555 75%),
        -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
    background-image:
        -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
        -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        -o-linear-gradient(45deg, transparent 75%, #555 75%),
        -o-linear-gradient(-45deg, transparent 75%, #555 75%);
    background-image:
        linear-gradient(45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(45deg, transparent 75%, #555 75%),
        linear-gradient(-45deg, transparent 75%, #555 75%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 

CSS3 背景渐变的方向与角度调整
小白菜的博客
04-12 914
CSS3 背景渐变是一种强大的样式特性，它允许开发者在网页元素的背景上创建平滑过渡的颜色效果。本文章的目的是深入探讨 CSS3 背景渐变中方向与角度调整的相关技术，详细讲解如何通过 CSS 代码来精确控制渐变的方向和角度，以满足不同的设计需求。范围涵盖了线性渐变和径向渐变这两种主要的渐变类型，包括它们的基本概念、原理、调整方法以及在实际项目中的应用。核心概念与联系：介绍线性渐变和径向渐变的核心概念、原理和架构，并通过示意图和流程图进行展示。
CSS3背景与渐变
baocuan8515的博客
07-03 131
一、CSS3 背景图像区域 background-clip（指定背景绘制区域） ackground-clip: border-box / padding-box / content-box; /*没有padding的时候，content-box和padding-box效果一样*/ 兼容性：IE9+、FireFox、Chrome、Safari、Opera ...
CSS3背景渐变
原创
06-13 923
转载至-[https://blog.youkuaiyun.com/u010381707/article/details/52491853](https://blog.youkuaiyun.com/u010381707/article/details/52491853)   在CSS3出来之前要想实现颜色渐变只能使用背景图片，CSS3渐变替代图片实现渐变效果能大大减少网络加载的时间，提升用户体验...
CSS3（背景和渐变）
qq_36519236的博客
04-15 618
CSS31.背景1.1背景图像区域（background-clip）1.2背景图像定位（background-origin）1.3背景图像大小（background-size）1.3多重背景图像1.4 简写2.渐变2.1 线性渐变（linear-gradient(方向，颜色，颜色);）2.1.1上下渐变2.1.2左右渐变2.1.3对角渐变2.1.4角度渐变2.1.5渐变色节点控制2.1.6渐变色透...
14CSS3背景与渐变
qq_42721138的博客
05-29 215
[目录] 目录[目录]一、CSS3背景二、CSS3渐变一、CSS3背景 CSS3背景图像区域 background-clip属性：指定背景绘制区域 语法：background-clip：border-box|padding-box|content-box; background-origin属性 backgroun-origin属性指定background-position属性应该是相......
CSS3渐变和背景
weixin_47352131的博客
05-09 369
文章目录 一、渐变 linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果 radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果 二、背景 1.background-size属性： background-origin: background-clip: 一、渐变 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变 linear-gradient线性渐
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
09-25
在本文中，将介绍如何使用CSS3的背景渐变属性-webkit-gradient，来实现文字颜色的渐变效果，而不需要依赖图片，进而减少页面的加载时间和服务器的请求量。 ### CSS3 背景渐变的基本原理 在CSS3中，背景渐变主要是...
css3实现背景动态渐变效果
11-21
总结来说，CSS3的背景渐变和动画功能极大地丰富了网页设计的表现力。理解并熟练掌握`linear-gradient()`和`@keyframes`的使用，可以帮助开发者创造出更具动态感和视觉吸引力的网页界面。在实际应用中，可以尝试结合...
CSS3蓝色渐变几何背景特效
06-24
"CSS3蓝色渐变几何背景特效"就是利用CSS3的特性，创造出独特且吸引人的文字背景布局。这个特效以蓝色渐变为基底，结合几何形状，为网页增加了一种现代感和专业感。 首先，我们要了解CSS3中的渐变（Gradient）。在...
CSS3实现背景颜色渐变
weixin_30770495的博客
01-09 137
CSS3渐变色生成网站：http://gradients.glrzad.com/ 本文参考：前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3出来以前，想要显示一个渐变的效果，必须要专门制作一个图片。 CSS3的出现，使得渐变色得以简单的实现。由于不是所有的浏览器都支持CSS3，所以不是所有的浏览器都能够显现出渐变的效果来。...
css3渐变背景色
ICY___的博客
06-03 984
这里是引用好久没写关于css的博客了，因为一个app的需要，自己要做一个动态的渐变背景块，所以算是重新学习了渐变类的css。 首先说一下这个背景：vue项目中，考虑到兼容性，特意写了兼容性代码（这在我的代码里面比较少见） 原理：自定义动画，从5%以5为单位到100%，20组代码块，其实说实话代码量不小，还有一种思想，利用math方法，随机颜色，然后动态加上去，大家可以试试，我没找到bug，但...
CSS3背景颜色渐变
BERWIN89的博客
12-23 673
背景颜色渐变： background:linear-gradient(颜色名)；默认 从上到下 多个颜色用逗号分隔 background:linear-gradient(left,颜色名)； 从左到右 background:linear-gradient(left top,颜色名)； 从左上到右下（对角线） background:linear-gradient(de
【html5】css3渐变
Evan_QB的博客
10-20 844
css3的渐变有两种: 一种是线性渐变: 线性渐变： linear-gradient(方向，起始颜色，终止颜色); 方向：to left to right to top to bottom 　角度　30deg 起始颜色 终止颜色 另一种是径向渐变: 径向渐变： radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）
背景实现颜色渐变
leewolf
07-23 1255
#import "ACViewController.h" @interface ACViewController () @end @implementation ACViewController - (void)viewDidLoad {          [super viewDidLoad]; //
CSS 备忘录2-动画、渐变、颜色、选择器等
@zhujj_的博客
07-01 990
transition是一个简写属性，依次分别代表四个值：transition-property（生效的属性）、transition-duration（持续的时间）、transition-timing-function（定时函数）、transition-delay（执行前的延迟时间）。其中前面两位（1A）代表红色的取值，紧随的两位（2B）表示绿色的取值，再后面两位（3C）表示蓝色的取值 ，最后两位（4F）的取值表示透明度的大小。该函数包含三个参数，分别代表色相、饱和度、明度（或者光度）。
css笔记-渐变
最新发布
weixin_46410264的博客
09-26 112
【代码】css 渐变。
动态style定义背景渐变
wwf1225的博客
03-07 1410
<template> <div class="hotBar"> <div v-for="(item, index) in data" :key="index" class="item"> <!-- {{item}} --> <div :style="{ color: setfontColor(index), }" class="title"...
css添加描边,css之为文本添加线性渐变和外描边(示例代码)
weixin_36139240的博客
08-03 687
css之为文本添加线性渐变和外描边一、效果：描边：描边+渐变：二、描边：api：text-stroke问题：text-stroke的描边是居中描边，无法直接设置外描边解决：在before中添加文本，设置字体描边，绝对定位在文本下方代码：Titlebody{background:blue}h2 {font-size: 31px;font-weight: 800;color: #70b4d9;posi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值