CSS设置网页背景

目录

概述：

1.background-color:

2.background-image：

 3.background-repeat：

 4.background-position：

5.background-attachment：

 6.background-size：

7.background-origin：

8.background-clip：

9.background：

概述：

我们在制作网页时给网页的背景添加一点东西，能让网页变得更加美观，更能留住用户。如下是一些用于设置HTML元素背景效果的属性：

  • background-color：可以用来设置网页背景的颜色。
  • background-image：可以用来设置网页的背景图片。
  • background-repeat：可以用来控制背景图片是否要重复。
  • background-attachment：可以控制背景图是否需要跟随窗口的滚动。
  • background-position：可以控制图像在元素中的位置。
  • background-size：可以控制图像的大小。
  • background-origin：可以设置background-position属性相对于什么属性来定义背景图像的。
  • background-clip：可以用来设置背景图像显示的区域。
  • background：是背景图的缩写，可以在一个这一个声明里面设置所有的背景属性。

初识CSS-CSDN博客 HTML简介-CSDN博客

1.background-color:

如要为元素设置一个background-color属性，此属性支持以下几个值：

值说明
color_name使用颜色的名字来为元素设置背景颜色(如:blue)。
hex_number使用十六进制来为元素设置背景颜色(如：#f00)
rgb_number使用rgb()函数来为元素额设置背景颜色(如:rgb(255,0,0))
transparent默认值，设置背景颜色为透明。
inherit从父元素里继承背景颜色。

示例代码如下： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.BC {color: rgb(17, 156, 184);background-color: red;margin: 20px;/*设置外边距为 20px*/padding: 20px;/*设置内边距为 20px*/border: 10px dotted green;/*设置一个宽 10px 的黄色虚线边框*/}</style>
</head><body><div class="BC">background-color属性的内容区域</div>
</body></html>

代码运行结果如下图：

从上图我们可以看出来background-color属性可以为元素设置一种颜色的背景，这种样色会填充元素的内容，边框以及内边距但是不会填充边框以外的区域。

2.background-image：

在CSS中我们可以使用background-image来为HTML元素设置背景图像，在默认情况下浏览器会把图像从左上角开始，在水平垂直方向上重复背景图像，用来填满这个元素，你可以使用background-repeat属性来控制背景是否重复或者如何重复。background-image属性的值如下：

值说明
url('URL')用来指向图像，url()括号里面的URL是图像的具体路径。
none默认值，不显示背景图。
inherit从父元素中集成背景图的设置。

背景图的区域更上述的背景颜色的区域是相同的。示例代码如下，其中url中的图片路径可以自己选择：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.BC {color: rgb(17, 156, 184);background-color: red;margin: 20px;/*设置外边距为 20px*/padding: 20px;/*设置内边距为 20px*/border: 10px dotted green;/*设置一个宽 10px 的黄色虚线边框*/background-image: url(./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg);}</style>
</head><body><div class="BC">属性的内容区域</div>
</body></html>

运行结果如下： 

 3.background-repeat：

在默认情况下图像会从元素内容左上角开始(包括内边距)，在水平和垂直方向开始重复用来填充整个元素(但是填充的范围不包括外边距)，你可以使用background-repeat属性来控制图像是否要重复或者如何重复图像，该属性的值如下：

值说明
repeat默认值，背景图将会在垂直方向和水平方向重复。
repeat-x图像只会在水平方向上重复。
repeat-y图像只会在垂直方向上重复。
no-repeat图像仅显示一次，不会在任何方向上重复。
inherit从父元素继承background-repeat属性。

示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.BC {color: rgb(17, 156, 184);background-color: red;margin: 20px;/*设置外边距为 20px*/padding: 20px;/*设置内边距为 20px*/border: 10px dotted green;/*设置一个宽 10px 的黄色虚线边框*/background-image: url(./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg);background-repeat: repeat-x;}</style>
</head><body><div class="BC">属性的内容区域</div>
</body></html>

代码运行结果如下：

 4.background-position：

我们可以使用background-position属性来设置图像的开始位置，属性的可选值如下:

值说明

left top(左上),

left center(左中),

left bottom(左下),

right top(右上)，

right bottom(右下)，

center top(中上)，

center center(居中)，

center bottom(中下)

使用 一些关键词来表示背景图的位置，如果你只设置了第一个关键字，那么第二个关键词将会是center。
x% y%使用百分比来表示图像距离元素左上角的距离，x%是水平方向，y%是垂直方向，左上角为0% 0%，右下角是100% 100%，如果只设置第一个值，那么另一个值就会是50%，默认的值为0% 0%。
xpos ypos使用像素(px)或者其他单位来表示图像距离元素左上角的距离，xpos是水平方向，ypos是垂直方向，左上角为0px 0px，右下角要看元素的尺寸，百分比和单位可以混用，如果仅设置第一个值，那么另外一个值默认为50%。

 示例代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.BC {color: rgb(17, 156, 184);background-color: red;margin: 20px;/*设置外边距为 20px*/padding: 20px;/*设置内边距为 20px*/border: 10px dotted green;background-position: 0% 50%;/*设置一个宽 10px 的黄色虚线边框*/background-image: url(./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg);background-repeat: repeat-x;}</style>
</head><body><div class="BC">属性的内容区域</div>
</body></html>

5.background-attachment：

background-attachment是用来设置背景图的位置的让背景图是固定在页面的某个地方还是跟随页面一起动，该属性的值如下：

值说明
scroll默认值，让页面跟随页面一起滚动。
fixed页面滚动时，背景不动。
inherit从父元素中继承background-attachment属性。

示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.PageSize {background-image: url(./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg);width: 100%;height: 1000px;background-attachment: fixed;}</style>
</head><body><div class="PageSize">这是一个简陋的页面</div><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol><p>这是底部的内容</p>
</body></html>

我们来一步一步仔细观察background-attachment: fixed;的作用，当滚动条到最后时图像只有一部分区域可以用来显示。

当滚动条到中间时图像有大部分区域可以用来显示。从此我们可以看出如果给图像设置fixe值那么图像的显示将会跟随滚动条。

 6.background-size：

在CSS中我们可以使用background-size来设置背景图的尺寸，该属性的值如下：

值说明

xpos

ypos

使用像素(px)或者其他的CSS单位来设置背景的宽度和高度，xpos是宽度，ypos是高度，如果只设置第一个值那么第二个值将会被设置为默认值auto(自动)。
x% y%使用百分比来表示背景图他是相对于所在的元素的宽度与高度的百分比，x%表示宽度，y%表示高度，如果只设置第一个值，那么第二个值将会被自动设置为默认值auto(自动)。
cover保持背景图像的横纵比例并将图像缩放足够大，使背景图像可以完全覆盖元素所在的区域，这样可能会导致图像的某些部分超出元素而无法显示。
contain保持背景图像的横纵比例并将图像缩放至足够大，使背景图可以完整的显示元素所在的区域，这样可能导致背景图无法完整覆盖整个元素区域。

图像的示例代码如下所示： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.PageSize {background-image: url(./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg);width: 100%;height: 1000px;/* background-attachment: fixed; */background-size: contain;}</style>
</head><body><div class="PageSize">这是一个简陋的页面</div><p>这是底部的内容</p>
</body></html>

下图中的图像是完整的显示在页面中了：

7.background-origin：

background-origin是CSS3中增加的属性，我们使用background-position来设置背景图的位置时，默认是以元素的左上角来进行计算的，不仅如此还可以使用background-origin属性来设置background-position属性相对于那个位置来定位图像，background-origin的可选值如下：

值说明
padding-box相对于元素的内边距来定位背景图。
border-box相对于元素的边框区域来定位背景图。
content-box相对于元素的内容区域来定位背景图。

8.background-clip：

background-clip是CSS3中新增的属性，通过它可以设置背景图像显示的区域，background-clip属性的可选值如下：

值说明
border-box默认值，在元素边框以及内容区域显示背景图像。
padding-box在元素的边框以及内容区域显示背景图像。
content-box在元素的内容区域显示背景图像。

9.background：

background是背景属性的简写，它可以为某个元素设置某个背景属性，还可以给多个元素或者是所有的元素设置背景属性，设置的背景属性没用固定的顺序，如下是推荐的顺序设置:

background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip

在设置background时需要注意的是：

  • 每个属性之间要使用空格来分开。
  • 如果同时设置background-position和background-size属性，这两个属性之间就需要使用/来进行分割了，并且还要遵循background-position属性在background-size属性后面的这个顺序。
  • 如果设置了background-origin属性和background-clip属性，就需要遵循background-origin属性在前  background-clip属性在后的顺序，如果background-origin属性与background-clip属性的值是相同的话那么此时设置其中一个值即可。

示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.PageSize {width: 100%;height: 1000px;/* background-attachment: fixed; */background: url(./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg) fixed content-box;}</style>
</head><body><div class="PageSize">这是一个简陋的页面</div><p>这是底部的内容</p>
</body></html>

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

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

相关文章

Linux初学（十四）LampLnmp

Linux初学（十四）LampLnmp

一、简介 LAMP和LNMP是两种常见的web服务器组合。具体如下&#xff1a; LAMP&#xff1a;LAMP代表的是Linux&#xff08;操作系统&#xff09; Apache&#xff08;HTTP服务器&#xff09; MySQL&#xff08;数据库&#xff09; PHP&#xff08;编程语言&#xff09;。这个组合被…
阅读更多...
C++利用键值对计算某一个数对应的最值及其索引位置

C++利用键值对计算某一个数对应的最值及其索引位置

目录 一、算法概述二、代码实现1、计算最值2、计算最值及其索引 三、结果展示 本文由CSDN点云侠原创&#xff0c;原文链接。如果你不是在点云侠的博客中看到该文章&#xff0c;那么此处便是不要脸的爬虫与GPT。 一、算法概述 类似下图所示&#xff0c;计算第一列中1或2对应的最…
阅读更多...
线段树练习

线段树练习

1.单点修改区间查询 P3374 【模板】树状数组 1 题目描述 如题&#xff0c;已知一个数列&#xff0c;你需要进行下面两种操作&#xff1a; 将某一个数加上 x 求出某区间每一个数的和 输入格式 第一行包含两个正整数 n,m&#xff0c;分别表示该数列数字的个数和操作的总个…
阅读更多...
ChatGPT 与 OpenAI 的现代生成式 AI（下）

ChatGPT 与 OpenAI 的现代生成式 AI（下）

原文&#xff1a;Modern Generative AI with ChatGPT and OpenAI Models 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 七、通过 ChatGPT 掌握营销技巧 在本章中&#xff0c;我们将重点介绍营销人员如何利用 ChatGPT&#xff0c;在这一领域中查看 ChatGPT 的主要用例…
阅读更多...
Delphi编写的图片查看器

Delphi编写的图片查看器

UNIT Unit17;INTERFACEUSESWinapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs,Vcl.StdCtrls, Vcl.ExtDlgs, Vcl.ExtCtrls, Vcl.Imaging.jpeg; //注意&#xff1a;要加入jpej 否侧浏览图…
阅读更多...
ids工业相机与电控位移台同步控制及数据采集

ids工业相机与电控位移台同步控制及数据采集

通过VS2017和OpenCV，实现ids工业相机与电控位移台同步控制及数据采集 目录项目环境配置代码流程及思路项目架构项目开发运行效果开发关键ids相机配置位移台环境配置相机头文件相机参数设置保存图像函数设置电控位移台头文件电控位移台设置参数最后就是通过main函数进行调用和控…
阅读更多...
《QT实用小工具·十一》Echart图表JS交互之仪表盘

《QT实用小工具·十一》Echart图表JS交互之仪表盘

1、概述 源码放在文章末尾 该项目为Echart图表JS交互之炫酷的仪表盘&#xff0c;可以用鼠标实时改变仪表盘的读数。 下面为demo演示&#xff1a; 该项目部分代码如下&#xff1a; #include "widget.h" #include "ui_widget.h" #include "qurl.h&q…
阅读更多...
PWM技术的应用

PWM技术的应用

目录 PWM技术简介 PWM重要参数 PWM实现呼吸灯 脉宽调制波形 PWM案例 电路图 keil文件 直流电机 直流电机的控制 直流电机的驱动芯片L293D L293D引脚图 L293D功能表 直流电机案例 电路图 keil文件 步进电机 步进电机特点 步进电机驱动芯片L298 L298引脚图 L…
阅读更多...
vue快速入门（一）vue的导入方法

vue快速入门（一）vue的导入方法

注释很详细&#xff0c;直接上代码 新增内容 下载js代码导入实例数据绑定显示 源码 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-widt…
阅读更多...
HbnnMall电子商城系统介绍（功能与技术栈）

HbnnMall电子商城系统介绍（功能与技术栈）

今天在看我个人网站上的文章时&#xff0c;看到了曾经在2020年自己开发的电商系统。那时我已经入职小米有一段时间了&#xff0c;基本已经对各个业务线&#xff0c;各种业务知识有了系统性的了解和学习&#xff0c;所以想自己动手写一个电商系统&#xff0c;以便进一步提高自己…
阅读更多...
书生·浦语训练营二期第二次笔记

书生·浦语训练营二期第二次笔记

文章目录 1. 部署 InternLM2-Chat-1.8B 模型进行智能对话1.1 配置环境1.2 下载 InternLM2-Chat-1.8B 模型 2. 实战&#xff1a;部署实战营优秀作品 八戒-Chat-1.8B 模型2.1 配置基础环境2.2 使用 git 命令来获得仓库内的 Demo 文件&#xff1a;2.3 下载运行 Chat-八戒 Demo 3. …
阅读更多...
19.网络测试

19.网络测试

考试频率低&#xff1b;主要是上午题&#xff1b; 主要议题&#xff1a; 1.网络全生命周期测试策略 2.网络设备评测指标 吞吐量&#xff1a;单位时间内完成xxxx的数量&#xff1b;如&#xff1a;不丢包情况下&#xff0c;系统最大的包转发速度&#xff1b; 丢包率&#xff…
阅读更多...
哈佛大学商业评论 -- 第二篇：增强现实是如何工作的？

哈佛大学商业评论 -- 第二篇：增强现实是如何工作的？

AR将全面融入公司发展战略&#xff01; AR将成为人类和机器之间的新接口&#xff01; AR将成为人类的关键技术之一&#xff01; 请将此文转发给您的老板&#xff01; --- 本文作者&#xff1a;Michael E.Porter和James E.Heppelmann 虽然物理世界是三维的&#xff0c;但大…
阅读更多...
C语言进阶课程学习记录-第22课 - 条件编译使用分析

C语言进阶课程学习记录-第22课 - 条件编译使用分析

C语言进阶课程学习记录-第22课 - 条件编译使用分析 条件编译基本概念条件编译实验条件编译本质实验-ifdefinclude本质实验-间接包含同一个头文件解决重复包含的方法-ifndef实验-条件编译的应用小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源…
阅读更多...
Java spring 01 （图灵）

Java spring 01 （图灵）

01.依赖注入 这里两个方法用到了datasource方法&#xff0c;不是bean这样的使用&#xff0c;没有autowird 会创建两个datasource configuration 会运行代理模式 会产生一个AppConfig的代理对象 这个代理对象会在spring的容器先找bean&#xff0c;datasource此时已经创建了be…
阅读更多...
Linux-进程概念

Linux-进程概念

1. 进程基本概念 书面概念&#xff1a;程序的一个执行实例&#xff0c;正在执行的程序等 内核概念&#xff1a;担当分配系统资源&#xff08;CPU时间&#xff0c;内存&#xff09;的实体。 2. 描述和组织进程-PCB PCB&#xff08;process contral block&#xff09;&#xff0…
阅读更多...
RisingWave 在品高股份 Bingo IAM 中的应用

RisingWave 在品高股份 Bingo IAM 中的应用

背景介绍 公司背景 品高股份&#xff0c;是国内专业的云计算及行业信息化服务提供商。公司成立于 2003 年&#xff0c;总部位于广州&#xff0c;下设多家子公司和分公司&#xff0c;目前员工总数近 900 人&#xff0c;其中 80 %以上是专业技术人员。 品高股份在 2008 年便开…
阅读更多...
Linux集群部署项目

Linux集群部署项目

目录 一&#xff0c;环境准备 1.1.安装MySQL 1.2.安装JDK 1.3.安装TomCat 1.4.安装Nginx 二&#xff0c;部署 2.1.后台服务部署 2.2.Nginx配置负载均衡及静态资源部署 一&#xff0c;环境准备 1.1.安装MySQL 将MySQL的安装包上传至服务器 查看系统中是否存在mariadb&…
阅读更多...
Go 源码之互斥锁 Mutex

Go 源码之互斥锁 Mutex

文章目录 一、总结二、源码&#xff08;一&#xff09;Mutex&#xff08;二&#xff09; Lock&#xff08;三&#xff09;Unlock 三、常见问题有劳各位看官 点赞、关注➕收藏 &#xff0c;你们的支持是我最大的动力&#xff01;&#xff01;&#xff01;接下来会不断更新 golan…
阅读更多...
中间件漏洞！！！

中间件漏洞！！！

上次好像记得讲过了框架漏洞&#xff0c;&#xff08;weblogic不是&#xff09;那么&#xff0c;今天我们就来讲一些中间件的漏洞 1.Apache解析漏洞 众所周知&#xff0c;Apache是一个非常出名的中间件&#xff0c;本来呢&#xff0c;他是不存在漏洞的&#xff0c;但是如果用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023