CSS 背景效果

目录

一、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.mfbz.cn/a/771089.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

PyFluent入门之旅（3）网格划分

PyFluent入门之旅（3）网格划分

在通过前两期熟悉了PyFluent的基础操作后&#xff0c;本期介绍如何通过PyFluent在Fluent Meshing中使用密闭几何&#xff08;watertight&#xff09;工作流进行网格划分。 开门见山&#xff0c;我先开启PyFluent的gui显示功能展示一下最终效果。 在通过前两期熟悉了PyFluent的…
阅读更多...
Appium自动化测试框架1

Appium自动化测试框架1

电脑的浏览器 手机的浏览器 手机上的app 原生的应用 纯java 手机上的app apk 移动网页应用 纯HTML CSS 手机的浏览器上 电脑的浏览器上 混合应用 java html css python代码 Appium python库 Appium 手机 都是代表本机 0.0.0.0 127.0.0.1 localhost 如何启动app 启动参…
阅读更多...
UE插件与云渲染：10个提升效率的选择

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

Unreal Engine&#xff08;虚幻引擎&#xff09;的插件生态丰富多样&#xff0c;从提升视觉效果到优化工作流程&#xff0c;为开发者提供了无限扩展的可能。本文推荐10款备受欢迎的插件&#xff0c;助你激发创意&#xff0c;提升开发效率. 一、地牢建筑师&#xff1a;程序化关…
阅读更多...
【论文速读】|FuzzAug：探索模糊测试作为神经网络测试生成的数据增强

【论文速读】|FuzzAug：探索模糊测试作为神经网络测试生成的数据增强

本次分享论文&#xff1a;FuzzAug: Exploring Fuzzing as Data Augmentation for Neural Test Generation 基本信息 原文作者&#xff1a;Yifeng He, Jicheng Wang, Yuyang Rong, Hao Chen 作者单位&#xff1a;University of California, Davis 关键词&#xff1a;软件测试…
阅读更多...
Dungeonborne联机失败、延迟高、卡顿的解决方法

Dungeonborne联机失败、延迟高、卡顿的解决方法

Dungeonborne将第一人称动作的即时性与经典的西幻RPG职业设计巧妙融合&#xff0c;为玩家带来了一场前所未有的游戏体验。在这款沉浸式第一人称PvPvE地下城探险游戏中&#xff0c;我们可以独自深入探索&#xff0c;也可以与值得信赖的伙伴并肩作战&#xff0c;共同揭开地下城的…
阅读更多...
汽车电子工程师入门系列——AUTOSAR通信服务框架（下）

汽车电子工程师入门系列——AUTOSAR通信服务框架（下）

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…
阅读更多...
使用微信开发者工具连接gitee

使用微信开发者工具连接gitee

编写代码 打开微信开发者工具 编写小程序代码 提交代码 在微信开发者工具提交代码到gitee仓库的步骤&#xff1a; 1.在gitee创建仓库&#xff0c;得到仓库url 2.微信开发者工具设置远程仓库 点击版本管理-->点击设置-->网络和认证-->认证方式选择 使用用户名和…
阅读更多...
【重磅】“一招”解决智能算法中不满足“预期”的问题【以微电网优化调度为例】

【重磅】“一招”解决智能算法中不满足“预期”的问题【以微电网优化调度为例】

1主要内容 之前完整复现了微电网优化调度的模型&#xff0c;具体链接为&#xff1a;【完全复现】基于改进粒子群算法的微电网多目标优化调度&#xff0c;这是一个并不复杂的模型&#xff0c;甚至不借助智能算法&#xff0c;我们也能大致分析出电网、柴油发电机、微型燃气轮机等…
阅读更多...
英国皇家物理学会(IOP)数据库简介及个人获取IOP文献的方法

英国皇家物理学会(IOP)数据库简介及个人获取IOP文献的方法

一、英国皇家物理学会(IOP)简介 英国皇家物理学会(IOP)成立于1873年,IOP现有科技期刊75种&#xff0c;具有较高的科研水平&#xff0c;还与多个世界知名的学协会合作出版&#xff0c;包括:中国物理学会、欧洲物理学会、德国物理学会、日本应用物理学会、欧洲光学学会、国际计量…
阅读更多...
论文学习笔记1:Federated Graph Neural Networks: Overview, Techniques, and Challenges

论文学习笔记1:Federated Graph Neural Networks: Overview, Techniques, and Challenges

文章目录 一、introduction二、FedGNN术语与分类2.1主要分类法2.2辅助分类法 三、GNN-ASSISTED FL3.1Centralized FedGNNs3.2Decentralized FedGNNs 四、FL-ASSISTED GNNS4.1horizontal FedGNNs4.1.1Clients Without Missing Edges4.1.1.1Non-i.i.d. problem4.1.1.2Graph embed…
阅读更多...
小白福音：teamOS系统，一键部署企业网盘，实现在线预览功能

小白福音：teamOS系统，一键部署企业网盘，实现在线预览功能

在传统的办公模式中&#xff0c;当我们需要查看一份文件时&#xff0c;往往需要下载、打开、编辑等一系列繁琐的步骤&#xff0c;如果是PDF、CAD、Markdown等特殊格式&#xff0c;还需要安装各种软件才能打开。 但最近get到了一个好用的东西&#xff0c;如果同事发来的文件格式…
阅读更多...
轮廓检测（python和c++实现）

轮廓检测（python和c++实现）

利用轮廓检测&#xff0c;我们可以检测物体的边界&#xff0c;并在图像中轻松定位。这通常是许多有趣应用的第一步&#xff0c;如图像前景提取、简单图像分割、检测和识别。 无人看管物体检测&#xff1a;公共场所的任何无人看管物体一般都被视为可疑物体。一种有效而安全的解…
阅读更多...
一文搞懂MySsql的Buffer Pool

一文搞懂MySsql的Buffer Pool

Buffer Pool是什么 Buffer Pool是MySQL数据库中一个非常关键的组件。数据库中的数据最终都是存放在磁盘文件上的。但是在对数据库执行增删改查操作时&#xff0c;不可能直接更新磁盘上的数据。因为如果直接对磁盘进行随机读写操作&#xff0c;那速度是相当的慢的。随便一个大磁…
阅读更多...
联系表单提交后，自动发送邮件的实现方法？

联系表单提交后，自动发送邮件的实现方法？

联系表单自动邮件回执功能怎么样&#xff1f;如何设置邮件回执&#xff1f; 联系表单是用户与网站所有者沟通的重要渠道。为了提升用户体验&#xff0c;许多网站会在联系表单提交后自动发送确认邮件给用户。AokSend将探讨如何实现这一功能&#xff0c;介绍不同的方法和步骤&am…
阅读更多...
如何在 Selenium Python 中解决验证码 | 2024 完整指南

如何在 Selenium Python 中解决验证码 | 2024 完整指南

由于在进行网络自动化时遇到验证码是让许多人感到不知所措的问题。这些验证码专为区分人类用户和自动化脚本而设计&#xff0c;对于使用Selenium进行网络爬虫或自动化任务而言&#xff0c;无疑是一个巨大的挑战。2024年的完全指南将为您提供全面的解决方案&#xff0c;帮助您高…
阅读更多...
LabVIEW新能源汽车电池性能测试系统

LabVIEW新能源汽车电池性能测试系统

新能源汽车的核心部件之一是电池&#xff0c;其性能直接关系到整车的续航里程、安全性和寿命。为了确保电池的性能和可靠性&#xff0c;测试是必不可少的环节。本文介绍了一种基于LabVIEW的新能源汽车电池性能测试系统&#xff0c;通过LabVIEW与数据采集设备的无缝集成&#xf…
阅读更多...
【Spring Boot 源码学习】初识 ConfigurableEnvironment

【Spring Boot 源码学习】初识 ConfigurableEnvironment

《Spring Boot 源码学习系列》 初识 ConfigurableEnvironment 一、引言二、主要内容2.1 Environment2.1.1 配置文件&#xff08;profiles&#xff09;2.1.2 属性&#xff08;properties&#xff09; 2.2 ConfigurablePropertyResolver2.2.1 属性类型转换配置2.2.2 占位符配置2.…
阅读更多...
docker容器技术、k8s的原理和常见命令、用k8s部署应用步骤

docker容器技术、k8s的原理和常见命令、用k8s部署应用步骤

容器技术 容器借鉴了集装箱的概念&#xff0c;集装箱解决了什么问题呢&#xff1f;无论形状各异的货物&#xff0c;都可以装入集装箱&#xff0c;集装箱与集装箱之间不会互相影响。由于集装箱是标准化的&#xff0c;就可以把集装箱整齐摆放起来&#xff0c;装在一艘大船把他们…
阅读更多...
C++基础（五）：类和对象（上）

C++基础（五）：类和对象（上）

从今天开始&#xff0c;我们正式进入面向对象编程&#xff0c;这是C与C语言的重要区别&#xff0c;编程思想发生变化&#xff0c;那到底什么是面向对象编程呢&#xff1f;接下来&#xff0c;我们慢慢的深入学习。 目录 一、面向过程和面向对象初步认识 1.1 面向过程 1.2 面…
阅读更多...
【Python】变量与基本数据类型

【Python】变量与基本数据类型

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言变量声明变量变量的命名规则 变量赋值多个变量赋值 标准数据类型变量的使用方式存储和访问数据&#xff1a;参与逻辑运算和数学运算在函数间传递数据构建复杂的数据结构 NameE…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站