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>

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

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

相关文章

SAP_MM模块-无价值物料管理实现思路

SAP_MM模块-无价值物料管理实现思路

无价值物料管理实现思路 业务背景一&#xff1a; 对于工具类的物料&#xff0c;本来想通过无物料号&#xff0c;收货时直接消耗在成本中心的方式来处理&#xff0c;这样&#xff0c;工程部和采购部都比较方便。 但财务部提出这部分工具物料还需要进行库存管理&#xff0c;但…
阅读更多...
【Python异常处理】

【Python异常处理】

在Python无法正常处理程序时就会发生异常&#xff0c;此时我们需要捕捉并处理它&#xff0c;否则程序就会终止执行。 例如&#xff1a; x 1 / 0 print(x)运行结果&#xff1a; ZeroDivisionError: division by zero #此时程序终止执行Python提供了三个非常重要的功能来处理…
阅读更多...
ubuntu20.04下搜狗输入法的安装

ubuntu20.04下搜狗输入法的安装

1、安装 fcitx 输入法的框架 sudo apt install fcitx-bin sudo apt-get install fcitx-table 2、Ubuntu下的默认浏览器火狐搜索 搜狗输入法 搜狗输入法linux-首页 &#xff08;下载x86_64) 3、安装依赖 sudo apt install libqt5qml5 libqt5quick5 libqt5quickwidgets5 qml-modu…
阅读更多...
【漏洞复现】万户 ezOFFICE wf_printnum SQL注入漏洞

【漏洞复现】万户 ezOFFICE wf_printnum SQL注入漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
【学习心得】Numpy学习指南或复习手册

【学习心得】Numpy学习指南或复习手册

本文是自己在学习Numpy过后总是遗忘的很快&#xff0c;反思后发现主要是两个原因&#xff1a; numpy的知识点很多&#xff0c;很杂乱。练习不足&#xff0c;学习过后一段时间不敲代码就会忘记。 针对这两个问题&#xff0c;我写了这篇文章。希望将numpy的知识点织成一张网&…
阅读更多...
JavaScript高级应用

JavaScript高级应用

学习作用域、变量提升、闭包等语言特征&#xff0c;加深对 JavaScript 的理解&#xff0c;掌握变量赋值、函数声明的简洁语法&#xff0c;降低代码的冗余度。 理解作用域对程序执行的影响 能够分析程序执行的作用域范围 理解闭包本质&#xff0c;利用闭包创建隔离作用域 了解…
阅读更多...
面试总结------2024/04/04

面试总结------2024/04/04

1.面试官提问&#xff1a;你说你在项目中使用springsecurity jwt 实现了登录功能&#xff0c;能简单讲一下怎么实现的吗&#xff1f; 2.使用RabbitMQ实现订单超时取消功能 订单状态定义 首先&#xff0c;我们需要定义订单的不同状态。在这个示例中&#xff0c;我们可以定义以下…
阅读更多...
[COCI 2011/2012 #5] EKO / 砍树 （二分）不开龙永远的痛！

[COCI 2011/2012 #5] EKO / 砍树 （二分）不开龙永远的痛！

不开龙long永远的痛&#xff01; 不开龙long永远的痛&#xff01; 不开龙long永远的痛&#xff01; 不开龙long永远的痛&#xff01; 不开龙long永远的痛&#xff01; //应该以最高的树为基准二分 初次尝试&#xff1a; #include<algorithm> #include<iostream&g…
阅读更多...
图的深度优先遍历DFS得到各节点的度

图的深度优先遍历DFS得到各节点的度

在 一文中&#xff0c;我们通过了广度优先搜索来得到图结构中各结点的度&#xff0c;在这一篇文章中&#xff0c;我们要通过深度优先搜索来得到图结构中各结点的度。 初始化 初始化&#xff0c;在下面的代码中&#xff0c;我们创建了一个具有6个结点的图结构&#xff0c;以及…
阅读更多...
YOLO电动车检测识别数据集：12617张图像，yolo标注完整

YOLO电动车检测识别数据集：12617张图像，yolo标注完整

YOLO电动车检测识别数据集&#xff1a;12617张图像&#xff0c;电动车一类&#xff0c;yolo标注完整&#xff0c;部分图像应用增强。 适用于CV项目&#xff0c;毕设&#xff0c;科研&#xff0c;实验等 需要此数据集或其他任何数据集请私信
阅读更多...
【调度工具】Azkaban用户手册

【调度工具】Azkaban用户手册

目录 一、概述 1.1 Azkaban 是什么 1.2 Azkaban 特点 1.3 Azkaban 与 Oozie 对比 功能 工作流定义 工作流传参 定时执行 资源管理 工作流执行 工作流管理 1.4 Azkaban 运行模式及架构 Azkaban 三大核心组件 Azkaban有两种部署方式 Azkaban Web Server Azkaban …
阅读更多...
简约轻量-失信录系统源码

简约轻量-失信录系统源码

失信录系统-最新骗子收录查询系统源码 首页查询&#xff1a; 举报收录页&#xff1a; 后台管理页&#xff1a; 失信录系统 V1.0.0 更新内容&#xff1a; 1.用户查询,举报功能 2.界面独立开发 3.拥有后台管理功能 4.xss,sql安全过滤 5.平台用户查询 6.用户中心&#xff08;待完…
阅读更多...
IO流：字节流、字符流、缓冲流、转换流、数据流、序列化流 --Java学习笔记

IO流：字节流、字符流、缓冲流、转换流、数据流、序列化流 --Java学习笔记

目录 IO流 IO流的分类 IO流的体系 字节流&#xff1a; 1、Filelnputstream(文件字节输入流) 2、FileOutputStream(文件字节输出流) 字节流非常适合做一切文件的复制操作 复制案例&#xff1a; try-catch-finally 和 try-with-resource 字符流 1、FileReader(文件字符…
阅读更多...
JimuReport 积木报表

JimuReport 积木报表

一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于 excel 操作风格&#xff0c;通过拖拽完成报表设计…
阅读更多...
C#学生信息管理系统

C#学生信息管理系统

一、引言 学生信息管理系统是现代学校管理的重要组成部分&#xff0c;它能够有效地管理学生的基本信息、课程信息、成绩信息等&#xff0c;提高学校管理的效率和质量。本文将介绍如何使用SQL Server数据库和C#语言在.NET平台上开发一个学生信息管理系统的课程设计项目。 二、项…
阅读更多...
前端学习＜四＞JavaScript基础——02-JavaScript入门：hello world

前端学习＜四＞JavaScript基础——02-JavaScript入门：hello world

开始写第一行 JavaScript&#xff1a;hello world JS 代码的书写位置在哪里呢&#xff1f;这个问题&#xff0c;也可以理解成&#xff1a;引入 JS 代码&#xff0c;有哪几种方式&#xff1f;有三种方式&#xff1a;&#xff08;和 CSS 的引入方式类似&#xff09; 行内式&…
阅读更多...
msyql 查看和修改字符集的方法

msyql 查看和修改字符集的方法

在插入或修改数据的时候&#xff0c;报字符集的错误&#xff0c;中文的无法进行插入修改。比如&#xff1a; update users set user_name关羽 where user_id2; 报错信息&#xff1a; ERROR 1366 (HY000): Incorrect string value: /xB9/xD8/xD3/xF0 for column user_name at …
阅读更多...
2024年学浪视频下载器

2024年学浪视频下载器

学浪视频官方没有提供下载选项&#xff0c;但又有很多人需要学浪视频下载器&#xff0c;于是我就开发了这么一款软件&#xff0c;学浪视频下载器:小浪助手.exe 我把学浪下载器打包成压缩包&#xff0c;有需要的自己取一下 链接&#xff1a;https://pan.baidu.com/s/1y7vcqILT…
阅读更多...
Google Chrome 常用设置

Google Chrome 常用设置

Google Chrome 常用设置 References 转至网页顶部 快捷键&#xff1a;Home 转至内容设置 chrome://settings/content 清除浏览数据 历史记录 -> 清除浏览数据 关于 Chrome 设置 -> 关于 Chrome chrome://settings/help References [1] Yongqiang Cheng, https:/…
阅读更多...
保健品wordpress外贸模板

保健品wordpress外贸模板

保健品wordpress外贸模板 健康保养保健品wordpress外贸模板&#xff0c;做大健康行业的企业官方网站模板。 https://www.jianzhanpress.com/?p3514
阅读更多...
最新文章

Copyright @ 2022~2023