CSS学习记录03

CSS背景

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

CSS background-color

background-color属性指定元素的背景色。

页面的背景色设置如下:

body {
  background-color: lightblue;
}

通过CSS,颜色通常由以下方式指定:

  • 有效的颜色名称-比如“red"
  • 十六进制值-比如”#ff0000"
  • RGB值-比如“rgb(255,0,0)"

其他元素

您可以为任何HTML元素设置背景颜色:

举例:<h1>、<p> 和 <div> 元素将拥有不同的背景色:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

不透明度/透明度

opacity属性指定元素的不透明度/透明度。 取值范围0.0 -1.0。 值越低,越透明:

div {
  background-color: green;
  opacity: 0.3;
}

 注意:使用opactiy属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用RGBA的透明度

如果您不希望对子元素应用不透明度,请使用RGBA颜色值。下面的例子背景色而不是文本的不透明度:

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

CSS背景图像

background-image 属性指定用作元素背景的图像。默认情况下,图像会重复,以覆盖整个元素。

例如:

页面的背景图像可以像这里设置:

body {
  background-image: url("paper.gif");
}

注意:使用背景图象时,请使用不会干扰文本的图像。还可以为特定元素设置背景元素,例如<p>元素:

p {
  background-image: url("paper.gif");
}

CSS背景重复

CSS background-repeat

默认情况下,background-image 属性在水平和垂直方向上都重复图像。某些图像只适合水平或垂直方向上重复。

body {
  background-image: url("gradient_bg.png");
}

如果上面的图像仅在水平方向上重复(background-repeat: repeat-x;),则背景看起来会更好:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

提示:如需垂直重复图像,请设置 background-repeat: repeat-y。

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像:

背景图像仅显示一次:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

CSS background-position 

background-position 属性用于指定背景图像的位置

举例:

把背景图片放在右上角:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

CSS 背景附着

CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动):

指定应该固定背景图像:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

指定背景图像应随页面的其余部分一起滚动:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

CSS背景简写

如需缩短代码,也可以在一个属性中指定所有背景属性,它被称为简写属性。

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

使用简写属性在一条声明中设置背景属性:

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

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

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

属性值之一缺失并不要紧,只要按照此顺序设置其他值即可。

所有 CSS 背景属性

属性描述
background在一条声明中设置所有背景属性的简写属性。
background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip规定背景的绘制区域。
background-color设置元素的背景色。
background-image设置元素的背景图像。
background-origin规定在何处放置背景图像。
background-position设置背景图像的开始位置。
background-repeat设置背景图像是否及如何重复。
background-size规定背景图像的尺寸。

补充知识

background-clip

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

 h1 {
    background: url(./assets/img/161105-17318310655d07.jpg);
    background-clip: text;
    color:transparent;
    font-size: 200px;
    background-origin: left;
    
  }

如果没有设置(background-image)或背景颜色(background-color),那么这个属性只有在边框( border )被设置为非固实(soild)、透明或半透明时才能看到视觉效果,否则,本属性产生的样式变化会被边框覆盖。

background-origin

background-origin规定了背景图片background-image属性的原点位置的背景相对区域。注意:当使用background-attachment为 fixed 时,该属性将被忽略不起作用。

/* 关键字值 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

background-size

background-size设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

/* 关键字 */
background-size: cover
background-size: contain

注意:没有被背景图片覆盖的背景区域仍然会显用background-color属性设置的背景颜色。此外,如果背景图片设置了透明或者半透明属性,衬在背景图片后面的背景色也会显示出来。

cover:

缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。

contain:

缩放背景图片以完全装入背景区,可能背景区部分空白。

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

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

相关文章

Unity类银河战士恶魔城学习总结(P155 More example on audio effects更多的音效细节)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节添加了更多的音效细节 音频管理器 AudioManager.cs 使得多个音效可以同时播放&#xff0c;注释掉以下代码 public void PlaySFX(in…

【分组去重】.NET开源 ORM 框架 SqlSugar 系列

&#x1f4a5; .NET开源 ORM 框架 SqlSugar 系列 &#x1f389;&#x1f389;&#x1f389; 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列…

openwrt利用nftables在校园网环境下开启nat6 (ipv6 nat)

年初写过一篇openwrt在校园网环境下开启ipv6 nat的文章&#xff0c;利用ip6tables控制ipv6的流量。然而从OpenWrt22版本开始&#xff0c;系统内置的防火墙变为nftables&#xff0c;因此配置方法有所改变。本文主要参考了OpenWRT使用nftables实现IPv6 NAT 这篇文章。 友情提示 …

IS-IS的原理

IS-IS的基本概念&#xff1a; 概述&#xff1a; IS-IS&#xff0c;中间系统到中间系统&#xff0c;是ISO国际标准化组织为它的无连接网络协议设计的一种动态路由协议 IS-IS支持CLNP网络和IP网络&#xff0c;采用数据链路层封装&#xff0c;区别于ospf只支持IP网络&#xff0…

006 MATLAB编程基础

01 M文件 MATLAB输入命令有两种方法&#xff1a; 一是在MATLAB主窗口逐行输入命令&#xff0c;每个命令之间用分号或逗号分隔&#xff0c;每行可包含多个命令。 二是将命令组织成一个命令语句文集&#xff0c;使用扩展名“.m”&#xff0c;称为M文件。它由一系列的命令和语句…

hhdb数据库介绍(10-31)

管理 数据恢复 执行数据恢复说明 恢复页面输入正确的恢复信息&#xff0c;提交恢复任务后跳转到恢复页面&#xff0c;任务状态显示“恢复中且有进度更新显示”&#xff0c;此时若触发删除操作&#xff0c;则提示“恢复执行中不能删除” 恢复期间计算节点会暂停服务&#xff…

IntelliJ IDEA配置(mac版本)

用惯了eclipse开发java的小伙伴们&#xff0c;初次接触IntelliJ IDEA可能会和我一样&#xff0c;多少有些不适感&#xff0c;在使用过程中总想着eclipse得对应功能。 接下来&#xff0c;我就总结下我日常开发中遇到的常用配置&#xff08;不包括快捷键&#xff0c;我认为每个人…

基于大数据python 豆果美食推荐数据可视化系统(源码+LW+部署讲解+数据库+ppt)

&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 很对人不知道选题怎么选 不清楚自己适合做哪块内容 都可以免费来问我 避免后期給自己答辩找麻烦 增加难度&#xff08;部分学校只有一次答辩机会 没弄好就延迟…

.NET8/.NETCore 依赖注入:自动注入项目中所有接口和自定义类

.NET8/.NETCore 依赖接口注入&#xff1a;自动注入项目中所有接口和自定义类 目录 自定义依赖接口扩展类&#xff1a;HostExtensions AddInjectionServices方法GlobalAssemblies 全局静态类测试 自定义依赖接口 需要依赖注入的类必须实现以下接口。 C# /// <summary>…

视频流媒体服务解决方案之Liveweb视频汇聚平台

一&#xff0c;Liveweb视频汇聚平台简介: LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台&#xff0c;可提供多协议&#xff08;RTSP/RTMP/GB28181/海康Ehome/大华&#xff0c;海康SDK等&#xff09;的视频设备接入&#xff0c;支持GB/T28181上下级联&#xf…

数据结构基础之《(9)—归并排序》

一、什么是归并排序 1、整体是递归&#xff0c;左边排好序右边排好序merge让整体有序 2、让其整体有序的过程里用了排外序方法 3、利用master公式来求解时间复杂度 4、当然可以用非递归实现 二、归并排序说明 1、首先有一个f函数 void f(arr, L, R) 说明&#xff1a;在arr上…

AWS账号提额

Lightsail提额 控制台右上角&#xff0c;用户名点开&#xff0c;选择Service Quotas 在导航栏中AWS服务中找到lightsail点进去 在搜索框搜索instance找到相应的实例类型申请配额 4.根据自己的需求选择要提额的地区 5.根据需求来提升配额数量,提升小额配额等大约1小时生效 Ligh…

[代码随想录06]哈希表的使用,有效字母异位词,两数组交集,快乐数,两数之和

前言 哈希表是什么&#xff1f;一句话带你理解&#xff0c;简单来说我们对于杂乱的数据&#xff0c;怎么快速找到数据&#xff0c;如何做呢&#xff1f;一般的做法就是遍历复杂度为o(N)去找寻一个数据&#xff0c;但是吧&#xff0c;我们这样思考的话&#xff0c;还是花了大量时…

Python 时间和日期

Python 日期和时间 概述时间元组struct_time获取当前时间获取格式化的时间格式化日期日期格式化符号获取某月日历Time 模块日历&#xff08;Calendar&#xff09;模块 概述 Python 提供一个 time 和 calendar 模块可以用于格式化日期和时间。 时间间隔是以秒为单位的浮点小数。…

今天我们来聊聊Maven中两个高级的概念—— 插件和目标

插件&#xff08;plugin&#xff09; Maven的核心是一个插件执行框架;所有的工作都是由插件完成的。 Maven中Plugin分为两种类型&#xff1a; build类型Plugin只能在build阶段执行&#xff0c;在POM中需要在 <build/> 标签下进行配置。 reporting类型&#xff1a;在si…

【Gitlab】CICD使用minio作为分布式缓存

1、安装minio 下载适合自己系统版本的安装文件https://dl.min.io/server/minio/release/windows-amd64/ yum install xxx.rpm 2、配置/etc/profile export MINIO_ACCESS_KEYroot [ui登录账号] export MINIO_SECRET_KEYminioDev001 [ui登录密码] export MINIO_OPTS"…

【语音识别】Zipformer

Zipformer 是kaldi 团队于2024研发的序列建模模型。相比较于 Conformer、Squeezeformer、E-Branchformer等主流 ASR 模型&#xff0c;Zipformer 具有效果更好、计算更快、更省内存等优点。并在 LibriSpeech、Aishell-1 和 WenetSpeech 等常用数据集上取得了当时最好的 ASR 结果…

UIE与ERNIE-Layout:智能视频问答任务初探

内容来自百度飞桨ai社区UIE与ERNIE-Layout&#xff1a;智能视频问答任务初探&#xff1a; 如有侵权&#xff0c;请联系删除 1 环境准备 In [2] # 安装依赖库 !pip install paddlenlp --upgrade !pip install paddleocr --upgrade !pip install paddlespeech --upgrade In …

VUE前端实现天爱滑块验证码--详细教程

第一步&#xff1a; Git地址&#xff1a;tianai-captcha-demo: 滑块验证码demo 找到目录 src/main/resources/static,拷贝 static 并改名为 tac 即可。 第二步&#xff1a; 将改为 tac 的文件&#xff0c;放进项目根目录中&#xff0c;如下图&#xff1a; 第三步&#xff1…

【CSS】一篇掌握CSS

不是因为有了希望才去坚持,而是坚持了才有了希望 目录 一.导入方式 1.行内样式 2.内部样式 3.外部样式(常用) 二.选择器 1.基本选择器(常用) 1.1标签选择器 1.2类选择器 1.3id选择器 2.层次选择器 2.1后代选择器 2.2子选择器 2.3相邻兄弟选择器 2.4通用兄弟选择器…