CSS(二)——CSS 背景

CSS 背景

CSS 背景属性用于定义HTML元素的背景。

CSS 背景属性

Property描述
background简写属性,作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。

看到这个表,你在理解的同时,可能在思考这该怎么用啊,首先要用到我们前面所总结的,我在这里再把那个图拿过来

尽管这看起来比前面的有一些复杂,同时可能理解这些属性也需要一段时间,但是其实这些属性本质还是要服从CSS的语法原则,使用的对象也还是对应的HTML元素。

接下来让我们详细了解一下每一个属性

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中

接下来我们看一个例子:
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
body
{background-color:#b0c4de;
}
</style>
</head><body><h1>我的 CSS web 页!</h1>
<p>你好世界!</p></body>
</html>

运行结果的展现就是页面颜色都变化了

那么很明显,这个使用又涉及到了HTML中的内容,颜色!,颜色有哪一些,如何引用,如果大家不熟悉,可以看看这篇博客,这是我总结的有关于HTML颜色的内容

HTML颜色icon-default.png?t=N7T8http://t.csdnimg.cn/UTaKr

CSS中,颜色值通常以以下方式定义:

十六进制 - 如:"#ff0000"

RGB - 如:"rgb(255,0,0)"

颜色名称 - 如:"red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
h1
{background-color:#6495ed;
}
p
{background-color:#e0ffff;
}
div
{background-color:#b0c4de;
}
</style>
</head><body><h1>CSS background-color 实例!</h1>
<div>
该文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div></body>
</html>

运行结果:

背景图像

background-image 属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
body 
{background-image:url('paper.gif');background-color:#cccccc;
}
</style>
</head><body>
<h1>Hello World!</h1>
</body></html>

运行结果:

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调

比如像这种的:

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
body
{background-image:url('gradient2.png');background-repeat:repeat-x;
}
</style>
</head><body>
<h1>Hello World!</h1>
</body></html>

运行结果:

有的图像只在垂直方向平铺 (repeat-y), 页面背景会更好,和在水平方向上平铺用法一样,这里就不演示了

背景图像- 设置定位与不平铺

background-repeat:no-repeat;

 有时候背景图像过多,会影响文本的排版

如果你不想让图像平铺,你可以使用 background-repeat 属性,为什么是这个属性呢,其实平铺不就是重复吗,repeat是重复的意思,设置不让重复,就不会一直平铺下去了

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>例子</title> 
<style>
body
{background-image:url('img_tree.png');background-repeat:no-repeat;
}
</style>
</head><body>
<h1>Hello World!</h1>
<p>runoob 背景图片实例。</p>
<p>背景图片只显示一次,但它打扰到读者!</p>
</body></html>

运行结果:

其中例子里面图片的路径,根据你所引用的图片具体路径书写,有时候图片不显示,是因为路径的错误,这也是以后写页面遇到图片不显示一个查错的方向

背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置

background-position

比如:background-position:right top;   在右上方的意思,其他的大家可以参考着写,比如

background-position: left top;

这个我验证的时候,发现一个现象,我写bottom树的位置是最高的,top树的位置在中间,而top的时候,树的位置是最低的,目前我还不知道原因哈哈

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<style>
body
{background-image:url('https://static.jyshare.com/images/mix/img_tree.png');background-repeat:no-repeat;background-position:right top;margin-right:200px;
}
</style></head><body>
<h1>Hello World!</h1>
<p>背景图片不重复,设置 position 实例。</p>
<p>背景图片只显示一次,并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body></html>

运行结果:

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background"

示例:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时,属性值的顺序为::

background-color

background-image

background-repeat

background-attachment

background-position

以上属性无需全部使用,你可以按照页面的实际需要使用.,但是一定要按照先后顺序

接下来给大家讲一个有意思的,让背景图片固定不动

只需要   background-attachment:fixed;   就可以了

用法和上面的属性一样

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

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

相关文章

C# 设计模式分类

栏目总目录 1. 创建型模式&#xff08;Creational Patterns&#xff09; 创建型模式主要关注对象的创建过程&#xff0c;包括如何实例化对象&#xff0c;并隐藏实例化的细节。 单例模式&#xff08;Singleton&#xff09;&#xff1a;确保一个类只有一个实例&#xff0c;并提…

go使用gjson操作json数据

gjson使用 gjson介绍安装gjson库解析 JSON 字符串路径语法复杂查询遍历和修改结论 gjson介绍 gjson 是一个 Go 语言库&#xff0c;用于快速解析 JSON 数据。它提供了非常简洁的 API 来查询 JSON 数据&#xff0c;无需预先定义 Go 结构体或映射&#xff08;map&#xff09;来匹…

《程序猿学会 Vue · 基础与实战篇》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

数据结构(二叉树-1)

文章目录 一、树 1.1 树的概念与结构 1.2 树的相关术语 1.3 树的表示 二、二叉树 2.1 二叉树的概念与结构 2.2特殊的二叉树 满二叉树 完全二叉树 2.3 二叉树的存储结构 三、实现顺序结构二叉树 3.1 堆的概念与结构 3.2 堆的实现 Heap.h Heap.c 默认初始化堆 堆的销毁 堆的插入 …

Python--Pandas基础------1

Pandas 是一个基于 Python 编程语言的开源数据分析工具&#xff0c;专注于提供快速、灵活且高效的数据结构和数据操作工具。Pandas 提供了丰富的功能&#xff0c;包括数据清洗、数据转换、数据分组、数据合并等。它能够轻松处理各种数据源的数据导入和导出&#xff0c;如CSV、E…

2024100读书笔记|《飞花令·夏》——鲜鲫银丝脍,香芹碧涧羹,人皆苦炎热,我爱夏日长

2024100读书笔记|《飞花令夏》——鲜鲫银丝脍&#xff0c;香芹碧涧羹&#xff0c;人皆苦炎热&#xff0c;我爱夏日长 《飞花令夏&#xff08;中国文化古典诗词品鉴&#xff09;》素心落雪 编著&#xff0c;飞花令得名于唐代诗人韩翃《寒食》中的名句“春城无处不飞花”&#xf…

matlab仿真 模拟调制(下)

&#xff08;内容源自详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真 刘学勇编著第五章内容&#xff0c;有兴趣的读者请阅读原书&#xff09; clear all ts0.001; t0:ts:10-ts; fs1/ts; dffs/length(t); msgrandi([-3 3],100,1); msg1msg*ones(1,fs/10); msg2reshape(ms…

Stable Diffusion 使用详解(1)---- 提示词及相关参数

目录 背景 提示词 内容提示词 人物及主体特征 场景 环境光照 画幅视角 注意事项及示例 标准化提示词 画质等级 风格与真实性 具体要求 背景处理 光线与色彩 负向提示词 小结 常用工具 另外几个相关参数 迭代步数 宽度与高度 提示词引导系数 图片数量 背景…

算法学习7——回溯算法

什么是回溯算法&#xff1f; 回溯算法是一种试探性搜索算法&#xff0c;通过递归的方式逐步构建解决方案&#xff0c;并在发现当前路径不满足条件时回退到上一步。回溯算法特别适用于组合优化问题&#xff0c;如全排列、组合、子集和图的着色问题等。 回溯算法的特点 递归&a…

cdh社区版免费替代方案。

免费的话&#xff0c;现在国产化的东西其实也还可以&#xff0c;而且国家在追求信创&#xff08;信息科技创新&#xff09;嘛。只有用的人多了&#xff0c;用的公司多了&#xff0c;国产的才有钱。才会发展的更好&#xff0c;良性循环。恶性的就是操作系统&#xff0c;大家都在…

Unity | Shader基础知识(第十九集:顶点着色器的进一步理解-易错点讲解)

目录 一、前言 二、网格 三、方法UnityObjectToClipPos 四、顶点着色器和片元着色器的POSITION 五、作者的碎碎念 一、前言 之前我们简单讲解过顶点着色器&#xff0c;也简单讲解了表面着色器&#xff0c;并且一起做了一些案例&#xff0c;因为顶点着色器本身是更自由一些…

RT-Thread必考面试题及参考答案

目录 RT-Thread操作系统的核心架构是什么? RT-Thread支持哪些微处理器架构? RT-Thread中任务调度的基本原则是什么? 如何在RT-Thread中创建一个新的线程? RT-Thread中的线程优先级如何影响调度? RT-Thread中的信号量和互斥锁有何区别? 描述一下RT-Thread中消息队列…

【Git多人协作开发】不同的分支下的多人协作开发模式

目录 0.前言背景 1.开发者1☞完成准备工作&协作开发 1.1查看分支情况 1.2创建本地分支feature-1 1.3三板斧 1.4push推本地分支feature-1到远程仓库 2.开发者2☞完成准备工作&协作开发 2.1创建本地分支feature-2 2.2三板斧 2.2push推送本地feature-2到远程仓库…

Sprong Boot学习|使用 guava-retrying 实现重试

背景 后端业务系统可能会在接口调用失败、网络拥塞超时、任务执行失败、系统错误等异常情况出现的时候进行重试操作&#xff0c;然而不同的场景对于重试的延迟间隔&#xff0c;频次等会有不同的要求&#xff0c;如果自己编排重试代码会比较繁琐&#xff0c;使用 guava-retryin…

LeetCode:合并2个有序数组(C语言)

1、2个非递减排序的整数数组nums1和nums2&#xff0c;2个整数m和n&#xff0c;代表nums1和nums2中的元素个数。合并nums2到nums1&#xff0c;合并后的数组也进行非递减排序 2、示例 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,3,0,0,0], m 3, nums2 [2,5,6], n 3 输出…

springSecurity学习之springSecurity web如何取得用户信息

web如何取得用户信息 之前说过SecurityContextHolder默认使用的是ThreadLocal来进行存储的&#xff0c;而且每次都会清除&#xff0c;但是web每次请求都会验证用户权限&#xff0c;这是如何做到的呢&#xff1f; 这是通过SecurityContextPersistenceFilter来实现的&#xff0…

FineBI连接MySQL5.7

一、在FineBI系统管理中&#xff0c;点击【新建数据库连接】 选择MySQL数据库 配置数据库连接&#xff0c;如下&#xff0c;其中数据库名称就是需要连接的目标数据库

《昇思 25 天学习打卡营第 21 天 | LSTM+CRF序列标注模型实现 》

《昇思 25 天学习打卡营第 21 天 | LSTMCRF序列标注模型实现 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 序列标注问题概述 序列标注是信息抽取中的一个关键任务&#xff0c;包括分词、词性标注、命名实体识别…

【通信协议-RTCM】MSM语句(2) - RINEXMSM7语句总结(重要!自动化开发计算卫星状态常用)

注释&#xff1a; 在工作中主要负责的是RTCM-MSM7语句相关开发工作&#xff0c;所以主要介绍的就是MSM7语句相关内容 1. 相位校准参考信号 2. MSM1、MSM2、MSM3、MSM4、MSM5、MSM6和MSM7的消息头内容 DATA FIELDDF NUMBERDATA TYPENO. OF BITSNOTES Message Number - 消息编…

四、Object 通⽤⽅法

Object是Java中所有类的基类&#xff0c;是最顶级的父类。在Java中&#xff0c;每个类都直接或间接地继承自Object类&#xff0c;即使没有显式地声明继承关系&#xff0c;Java也会自动为每个类添加extends Object。这意味着&#xff0c;Object类中定义的方法可以被所有Java类使…