CSS 背景效果

news2024/12/24 18:05:59

目录

一、CSS背景属性

二、准备工作

三、background-color

四、background-image

五、background-repeat

六、background-position

七、background-size

八、background-attachment

九、background-clip

十、background-origin

十一、background

一、CSS背景属性

在CSS中，一般使用下面这些常用的背景属性，来定义HTML元素的背景；

序号属性说明
1

background-color

设置元素的背景颜色；
2background-image设置元素的背景图像；
3

background-repeat

设置元素背景图像的重复效果；
4

background-position

设置元素背景图像的起始位置；
5

background-size

设置元素背景图像的大小；CSS3 属性；
6

background-attachment

设置元素背景图像是否固定；
7background-clip设置元素背景的绘制区域；CSS3 属性；
8background-origin设置元素背景图片的定位区域；CSS3 属性；
9

background

简写属性；

下面通过对每个属性及其属性值的详细介绍和具体示例，说明上述背景属性的使用方法和实现效果；

二、准备工作

准备一个简易的HTML页面test.html，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 背景</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /* 测试背景效果 */
        body > div{
        }
    </style>
</head>

<body>
    <div>背景效果测试</div>
</body>

</html>

准备一张背景图片，可以将其大小设置的稍微小一点；

三、background-color

该属性用来设置HTML元素的背景颜色；

序号属性值描述
1color

指定背景颜色；

2transparent指定背景颜色透明（默认）；
3inherit指定该值从父元素继承；

其中的color用来指定设置具体的背景颜色；

可以是CSS 中的16进制颜色、RGB颜色、系统预定义的颜色等；

/* 测试背景效果 */
body > div{
    height: 200px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #999;

    /* 1、设置背景颜色 */
    background-color: yellowgreen;
}

四、background-image

该属性用来设置HTML元素的背景图像；

注意：背景图像并不一定是图片；

序号属性值描述
1none无背景图像（默认）；
2url()指定背景图像的url；
3linear-gradient()创建线性渐变背景图像；
4

radial-gradient()

创建径向渐变背景图像；
5repeating-linear-gradient()创建重复的线性渐变背景图像；
6repeating-radial-gradient()创建重复的径向渐变背景图像
7inherit指定该值从父元素继承；

1、url()

用来指定图片作为元素的背景图像，参数为图片的URL路径；

/* 测试背景效果 */
body > div{
    height: 500px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #999;

    /* 2、设置背景图像 */
    background-image: url("D:\\test\\bg-img.jpg");
}

注意：

  • 这里虽然指定了图片为背景，但是该背景图像的大小、位置都是不合适的；
  • 需要结合后面介绍的背景属性做进一步调整； 
  • 如果只是简单指定一张背景图片，其大小跟盒子的大小不一定是完全一致的；
  • 背景图的渲染是从左上角开始；图片过大，会被剪裁；过小，则会平铺；

2、linear-gradient()

该函数用来创建线性渐变来背景图像；

background-image: linear-gradient(direction, start-color, ..., last-color);
  • direction：指定渐变的方向或者角度（可省略，默认从上往下）；
  • start-color, ..., last-color：用来指定渐变的起止颜色，需要制定两种及以上的颜色；
...
height: 200px;
...
/* 2、设置背景图像 */
background-image: linear-gradient(to right, yellow, yellowgreen);
...

注意：更多详细用法可参考CSS中的 linear-gradient() 函数； 

3、radial-gradient()

该函数用来创建径向渐变来背景图像；

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  • shape：用来指定径向渐变圆的类型——ellipse (默认)、circle；
  • size：用来指定径向渐变的大小——farthest-corner (默认)、closest-side、closest-corner、farthest-side；
  • position：用来指定径向渐变的位置——center（默认）、top、bottom； 
  • start-color, ..., last-color：用来指定渐变的起止颜色；
...
height: 200px;
...
/* 2、设置背景图像 */
background-image: radial-gradient(circle at bottom, yellow, yellowgreen); 
...

注意：更多详细用法可参考CSS中的 radial-gradient() 函数；

4、repeating-linear-gradient()

该函数用来创建重复的线性渐变背景图像；

与linear-gradient()函数的工作方式类似，到达终点会进行重复；

...
height: 200px;
...
/* 2、设置背景图像 */
background-image: repeating-linear-gradient(to right, yellow 10%, yellowgreen 20%);
...

注意：更多详细用法可参考CSS中的 repeating-linear-gradient() 函数；

5、repeating-radial-gradient()

该函数用来创建重复的径向渐变背景图像；

与radial-gradient()函数的工作方式类似，到达终点会进行重复；

...
height: 200px;
...
/* 2、设置背景图像 */
background-image: repeating-radial-gradient(circle at bottom,  yellow 40%, yellowgreen 60%);
...

注意：更多详细用法可参考CSS中的 repeating-radial-gradient() 函数；

五、background-repeat

该属性用来设置元素背景图像的重复效果；

序号属性值说明
1repeat设置背景图像在垂直和水平方向重复（默认值）；
2repeat-x设置背景图像只在水平方向重复；
3repeat-y设置背景图像只在垂直方向重复；
4no-repeat设置背景图像不重复；
5inherit设置该值从父元素继承；
/* 测试背景效果 */
body > div{
    height: 500px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #999;

    /* 2、设置背景图像 */
    background-image: url("D:\\test\\bg-img.jpg");

    /* 3、设置背景图像重复效果 */
    background-repeat: no-repeat;
}

 在实际开发中，一般都是设置背景不重复，很少有需要重复的时候；

六、background-position

该属性用来设置元素背景图像的起始位置；

序号属性值描述
1positionx  positiony第一个值指定水平方向起始位置；第二个值指定垂直方向起始位置；
2inherit指定该值从父元素继承；

注意：

  • 如果不指定，默认从左上角开始；
  • positionx和positiony的取值可以是方位关键字、百分比、像素，或其他任何的CSS单位；
  • 如果仅指定一个方位关键字，另一个会是center；
  • 如果仅指定一个百分比，另一个会是50%；
/* 测试背景效果 */
body > div{
    height: 500px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #999;

    /* 2、设置背景图像 */
    background-image: url("D:\\test\\bg-img.jpg");

    /* 3、设置背景图像重复效果 */
    background-repeat: no-repeat;

    /* 4、设置背景图像的起始位置 */
    background-position: 50% top;
}

七、background-size

该属性用来设置元素背景图像的大小；

序号属性值说明
1sizex  sizey第一个值设置宽度，第二个值设置的高度；默认为auto；
2cover设置图像保持纵横比，并将图像缩放成将完全覆盖背景定位区域的最小大小。
3contain设置图像保持纵横比，并将图像缩放成将适合背景定位区域的最大大小。
4inherit设置该值继承自父元素；

1、sizex  sizey

指定宽度和高度，图片会被拉伸变形；

/* 测试背景效果 */
body > div{
    height: 500px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #999;

    /* 2、设置背景图像 */
    background-image: url("D:\\test\\bg-img.jpg");

    /* 3、设置背景图像重复效果 */
    background-repeat: no-repeat;

    /* 4、设置背景图像的起始位置 */
    background-position: center;

    /* 5、设置背景图像的大小 */
    background-size: 80% 300px;  
}

 2、contain

保持图片的纵横比，但在放大或缩小时，不会超过父盒子的宽高；

...
/* 5、设置背景图像的大小 */
background-size: contain;  
...

3、cover

保持图片的纵横比，放大或缩小时，会使图片完全覆盖父盒子，超出部分被剪裁；

配合background-position属性，显示出背景图片的中心部分；

...
/* 5、设置背景图像的大小 */
background-size: cover; 
...

八、background-attachment

该属性用来设置背景图像是否固定；

序号属性值描述
1scroll设置背景图片随着页面的滚动而滚动（默认值）；
2fixed设置背景图片不会随着页面的滚动而滚动；
3local设置背景图片会随着元素内容的滚动而滚动；
4initial设置为默认值。 
5inherit设置该值继承自父元素；

（1）fixed

设置背景图像固定，不会随着页面内容的滚动而滚动；

/* 测试背景效果 */
body > div{
    height: 200px;
    line-height: 500px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #999;
    overflow-y: scroll;

    /* 2、设置背景图像 */
    background-image: url("D:\\test\\bg-img.jpg");

    /* 3、设置背景图像重复效果 */
    background-repeat: no-repeat;

    /* 4、设置背景图像的起始位置 */
    background-position: center;

    /* 5、设置背景图像的大小 */
    background-size: cover;  

    /* 6、设置背景图片是否固定 */
    background-attachment: fixed;
}

（2）local

设置背景图片不固定，随着内容的滚动而滚动；

...
/* 6、设置背景图片是否固定 */
background-attachment: local;
...

九、background-clip

该属性用来设置元素背景的绘制区域；

序号属性值说明
1border-box设置元素背景绘制在border内（剪切成border方框）；默认值；
2padding-box设置元素背景绘制在padding内（剪切成padding方框）；
3content-box设置元素背景绘制在content内（剪切成content方框）；

（1）border-box

以元素边框border区域为界限绘制背景，默认值；

/* 测试背景效果 */
body > div{
    height: 200px;
    padding: 20px;
    margin: 20px;
    border: 10px dotted #999;

    /* 1、设置背景颜色 */
    background-color: yellowgreen;
    
    /* 7、设置背景绘制区域 */
    background-clip: border-box;
}

（2）padding-box

 以元素内边距padding区域为界限绘制背景；

...
/* 7、设置背景绘制区域 */
background-clip: padding-box;
...

（2）padding-box

 以元素内内容content区域为界限绘制背景；

...
/* 7、设置背景绘制区域 */
background-clip: content-box;
...

十、background-origin

该属性用来设置元素背景图像的定位区域；指定background-position属性应该是相对位置；

（1）border-box

相对border位置，定位背景图像；

/* 测试背景效果 */
body > div{
    height: 500px;
    padding: 20px;
    margin: 20px;
    border: 10px dotted #999;

    /* 2、设置背景图像 */
    background-image: url("D:\\test\\bg-img.jpg");

    /* 3、设置背景图像重复效果 */
    background-repeat: no-repeat;

    /* 8、设置背景图像的定位区域 */
    background-origin: border-box;
}

（2）padding-box

相对padding位置，定位背景图像，默认值；

...
/* 8、设置背景图像的定位区域 */
background-origin: padding-box;
...

（3）content-box

相对content位置，定位背景图像；

...
/* 8、设置背景图像的定位区域 */
background-origin: content-box;
...

十一、background

CSS 背景的简写属性，可以在这个属性中设置所有的背景属性；

分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image；

空格分隔，不分先后顺序；

/* 测试背景效果 */
body > div{
    height: 500px;
    padding: 20px;
    margin: 20px;
    border: 1px solid #999;

    /* 设置 元素背景  */
    background: yellowgreen url("D:\\test\\bg-img.jpg") no-repeat center fixed border-box;
 
}

====================================================================

每天进步一点点~！

记录一下CSS背景的相关内容！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1893595.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【刷题汇总--Fibonacci数列、单词搜索、杨辉三角】

【刷题汇总--Fibonacci数列、单词搜索、杨辉三角】

C日常刷题积累 今日刷题汇总 - day0041、Fibonacci数列1.1、题目1.2、思路1.3、程序实现 2、单词搜索2.1、题目2.2、思路2.3、程序实现 3、杨辉三角3.1、题目3.2、思路3.3、程序实现 - 蛮力法3.4、程序实现 - vector3.5、程序实现 - dp 4、题目链接 今日刷题汇总 - day004 1、…
阅读更多...
使用 pyecharts 渲染成图片程序报错： echarts is not defined问题处理

使用 pyecharts 渲染成图片程序报错： echarts is not defined问题处理

背景 之前写的使用 snapshot_selenium 来保存pyeacharts渲染成的网页截图&#xff0c;可以正常运行。程序搁置了半年&#xff0c;不知道动了电脑哪里&#xff0c;再次运行程序时&#xff0c;程序开始报错&#xff1a;JavascriptException: javascript error: echarts is not d…
阅读更多...
EDUSRC-我与xx职院的爱恨情仇（教育漏洞挖掘）

EDUSRC-我与xx职院的爱恨情仇（教育漏洞挖掘）

一、人生中的第一个漏洞 2024.1月的时候&#xff0c;当时看朋友挖到了一个名校的漏洞&#xff0c;特别羡慕&#xff0c;我也想挖&#xff0c;但是当时什么都不会&#xff0c;就只好在网上搜edusrc挖掘思路、edusrc挖掘教程等等&#xff0c;边学边挖&#xff0c;边挖边学。 一开…
阅读更多...
揭秘Stable Diffusion做AI绘图赚钱秘诀：从零开始月入过万

揭秘Stable Diffusion做AI绘图赚钱秘诀：从零开始月入过万

1. 概述 随着人工智能技术的飞速发展&#xff0c;AI绘图已经成为一个热门话题。AI绘图不仅在艺术创作中展现了巨大的潜力&#xff0c;还为个人和企业提供了多种赚钱的机会。本文将详细介绍几种通过AI绘图赚钱的方法&#xff0c;帮助你在这个新兴领域中找到适合自己的盈利途径。…
阅读更多...
苹果公司的Wifi定位服务(WPS)存在被滥用的风险

苹果公司的Wifi定位服务(WPS)存在被滥用的风险

安全博客 Krebs on Security 2024年5月21日发布博文&#xff0c;表示苹果公司的定位服务存在被滥用风险&#xff0c;通过 "窃取"WPS 数据库&#xff0c;可以定位部队行踪。 相关背景知识 手机定位固然主要依赖卫星定位&#xff0c;不过在城市地区&#xff0c;密集的…
阅读更多...
为什么要卸载手机上面的抖音？

为什么要卸载手机上面的抖音？

删除抖音等社交媒体应用可能出于多种原因&#xff0c;这里列举一些常见的考虑因素&#xff1a; 1. **时间管理**&#xff1a; 抖音和其他社交媒体平台可能会占用大量时间&#xff0c;影响个人的日常生活和工作学习效率。 这个对于自己而言是一个客观存在的事情&#xff1a; 2.…
阅读更多...
恭喜！H医生一个月内荣获美国芝加哥大学访问学者邀请函

恭喜！H医生一个月内荣获美国芝加哥大学访问学者邀请函

➡️【院校背景】 芝加哥大学&#xff08;英文&#xff1a;The University of Chicago&#xff0c;简称UChicago、“芝大”&#xff09;由石油大王约翰洛克菲勒于1890年创办&#xff0c;坐落于美国伊利诺伊州芝加哥市&#xff0c;一所私立研究型大学&#xff0c;属于全球大学校…
阅读更多...
香橙派 AIpro 根据心情生成专属音乐

香橙派 AIpro 根据心情生成专属音乐

香橙派 AIpro 根据心情生成专属音乐 一、开机1.1 开发板开机1.2 远程连接到 OrangePi AIpro 二、开发环境搭建2.1 创建环境、代码部署文件夹2.2 安装 miniconda2.3 为 miniconda 更新国内源2.4 创建一个 python 3.9 版本的开发环境 三、基于MindNLP MusicGen生成自己的个性化音…
阅读更多...
MWCSH 2024丨美格智能亮相上海世界移动通信大会，加速5G+AIoT应用进程

MWCSH 2024丨美格智能亮相上海世界移动通信大会，加速5G+AIoT应用进程

6月26日—28日全球通信领域最具规模和影响力的通信盛事—2024MWC上海世界移动通信大会在上海新国际博览中心隆重举行。MWC上海是亚洲连接生态系统的风向标&#xff0c;本届大会以“未来先行&#xff08;Future First&#xff09;”为主题&#xff0c;聚焦“超越5G”“人工智能经…
阅读更多...
《vue3》reactivity API（vue3的$set呢?）

《vue3》reactivity API（vue3的$set呢?）

在Vue2中&#xff0c;修改某一些数据&#xff0c;视图是不能及时重新渲染的。 比如数组 <div> {{ myHobbies }} </div>data: () > ({myHobbies: [篮球, 羽毛球, 桌球] }); mounted () {this.myHobbies[1] sing; // 视图层并没有改变 }因此&#xff0c;Vue2就提…
阅读更多...
UE插件与云渲染：10个提升效率的选择

UE插件与云渲染：10个提升效率的选择

Unreal Engine&#xff08;虚幻引擎&#xff09;的插件生态丰富多样&#xff0c;从提升视觉效果到优化工作流程&#xff0c;为开发者提供了无限扩展的可能。本文推荐10款备受欢迎的插件&#xff0c;助你激发创意&#xff0c;提升开发效率. 一、地牢建筑师&#xff1a;程序化关…
阅读更多...
element-ui Tree之懒加载叶子节点强制设置父级半选效果

element-ui Tree之懒加载叶子节点强制设置父级半选效果

效果&#xff1a; 前言&#xff1a; 我们是先只展示一级的&#xff0c;二级的数据是通过点击之后通过服务器获取数据&#xff0c;并不是全量数据直接一起返回回来的。 问题&#xff1a; 当你设置了默认选中的子节点&#xff0c;但是由于刚进入页面此时tree中数据暂是没有这个…
阅读更多...
每日一练：攻防世界：Hidden-Message

每日一练：攻防世界：Hidden-Message

追踪UDP数据流&#xff0c;没有任何隐藏信息&#xff1a; WP&#xff1a; 观察流量包 每个流的唯一的区别就是UDP的源地址srcport的最后一位在变化 都提取出来就是二进制序列 用tshark提取一下 //使用tshark过滤出源端口&#xff0c;使用cut裁取端口的最后一位 tshark -r 8…
阅读更多...
SSM学生资助管理系统-计算机毕业设计源码30825

SSM学生资助管理系统-计算机毕业设计源码30825

目 录 摘 要 1 绪论 1.1 研究背景 1.2研究意义 1.3论文结构与章节安排 2 学生资助管理系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2.4 …
阅读更多...
室内效果图渲染要多久？

室内效果图渲染要多久？

效果图的渲染时间并非固定&#xff0c;一张效果图的渲染时间可能从几分钟到几小时不等&#xff0c;甚至对于非常复杂和高质量的渲染任务&#xff0c;可能需要几天的时间。影响效果图渲染时间的因素有很多&#xff0c;今天就给大家介绍一下。 电脑配置 一、电脑配置 CPU和GPU…
阅读更多...
牛客小白月赛97 （个人题解）（待补完）

牛客小白月赛97 （个人题解）（待补完）

前言&#xff1a; 前天晚上写的一场牛客上比赛&#xff0c;虽然只写出了三道&#xff0c;但比起之前的成绩感觉自己明显有了一点进步了&#xff0c;继续努力吧&#xff0c; 正文&#xff1a; 链接&#xff1a;牛客小白月赛97_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞…
阅读更多...
TCP粘包解决方法

TCP粘包解决方法

一. 产生原因及解决方法 产生原因&#xff1a;TCP是面向连接、基于字节流的协议&#xff0c;其无边界标记。当服务端处理速度比不其接收速度时&#xff0c;就很容易产生粘包现象。 解决方法&#xff1a;目前主要有两种解决方法&#xff0c;一个是在内容中添加分割标识&#xf…
阅读更多...
记录问题：解决vscode找不到Python自定义模块，报错No module named ‘xxx‘

记录问题：解决vscode找不到Python自定义模块，报错No module named ‘xxx‘

1. 背景 我非要用vscode&#xff0c;不用pycharm&#xff0c;哼&#xff01; 2. 问题 由于 import xx 自定义的模块&#xff0c; python run 的时候会报错 No module named ‘xxx‘ 报错信息&#xff1a; Traceback (most recent call last):File "d:\work\sf_financ…
阅读更多...
Pharmacy Management System v1.0 文件上传漏洞（CVE-2022-30887）

Pharmacy Management System v1.0 文件上传漏洞（CVE-2022-30887）

前言 CVE-2022-30887 是一个存在于 Pharmacy Management System v1.0 中的远程代码执行&#xff08;RCE&#xff09;漏洞。这个漏洞存在于 /php_action/editProductImage.php 组件中。攻击者可以通过上传一个精心制作的图像文件来执行任意代码。 漏洞详细信息 漏洞描述: Pha…
阅读更多...
通过升级nginx完美修复nginx相关漏洞

通过升级nginx完美修复nginx相关漏洞

目录 前言1 安全评估报告的漏洞信息1.1 nginx漏洞概况1.2 nginx漏洞详细信息1.3 安装的软件信息 2 问题分析3 Nginx从1.18版本升级到1.26版本的步骤与说明3.1 查看现有Nginx配置参数3.2 下载新版本Nginx3.3 配置新版本Nginx3.4 编译新版本Nginx3.5 备份旧版本Nginx的二进制文件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023