CSS背景:背景色/背景图像/背景重复/背景附着/简写背景属性(一文搞懂)
目录
CSS背景
CSS 背景色
实例
其他元素
实例
不透明度 / 透明度
实例
使用 RGBA 的透明度
实例
CSS 背景图像
实例
实例
实例
CSS 背景重复
实例
实例
CSS background-repeat: no-repeat
实例
CSS background-position
实例
CSS 背景附着
实例
实例
CSS 简写背景属性
实例
所有 CSS 背景属性
总结
CSS背景
CSS 背景属性用于定义元素的背景效果。
我们将学习如下 CSS 背景属性:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS 背景色
background-color
属性指定元素的背景色。
实例
页面的背景色设置如下:
body {background-color: lightblue;
}
亲自试一试
通过 CSS,颜色通常由以下方式指定:
- 有效的颜色名称 - 比如 "red"
- 十六进制值 - 比如 "#ff0000"
- RGB 值 - 比如 "rgb(255,0,0)"
请查看 CSS 颜色值,获取可能颜色值的完整列表。
其他元素
可以为任何 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;
}
亲自试一试
注意:使用 opacity
属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。
使用 RGBA 的透明度
如果不希望对子元素应用不透明度,例如上面的例子,可以使用 RGBA 颜色值。
下面的例子设置背景色而不是文本的不透明度:
从我们的 CSS 颜色 章节中学到了可以将 RGB 用作颜色值。除 RGB 外,还可以将 RGB 颜色值与 alpha 通道一起使用(RGBA) - 该通道指定颜色的不透明度。
RGBA 颜色值指定为:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
提示:可在我们的 CSS 颜色 一章中学到有关 RGBA 颜色的更多知识。
实例
div {background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}
亲自试一试
CSS 背景图像
background-image
属性指定用作元素背景的图像。
默认情况下,图像会重复,以覆盖整个元素。
实例
页面的背景图像可以像这样设置:
body {background-image: url("paper.gif");
}
亲自试一试
实例
本例展示了文本和背景图像的错误组合。文字难以阅读:
body {background-image: url("bgdesert.jpg");
}
亲自试一试
注意:使用背景图像时,请使用不会干扰文本的图像。
还可以为特定元素设置背景图像,例如 <p> 元素:
实例
p {background-image: url("paper.gif");
}
亲自试一试
CSS 背景重复
默认情况下,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 背景附着
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;
}
您能够使用简写属性 background
:
实例
使用简写属性在一条声明中设置背景属性:
body {background: #ffffff url("tree.png") no-repeat right top;
}
亲自试一试
在使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
属性值之一缺失并不要紧,只要按照此顺序设置其他值即可。请注意,在上面的例子中,我们没有使用 background-attachment 属性,因为它没有值。
所有 CSS 背景属性
属性 | 描述 |
---|---|
background | 在一条声明中设置所有背景属性的简写属性。 |
background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
background-clip | 规定背景的绘制区域。 |
background-color | 设置元素的背景色。 |
background-image | 设置元素的背景图像。 |
background-origin | 规定在何处放置背景图像。 |
background-position | 设置背景图像的开始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
background-size | 规定背景图像的尺寸。 |
总结
本节介绍了CSS背景相关知识。
CSS背景:背景色/背景图像/背景重复/背景附着/简写背景属性(一文搞懂)相关推荐
- CSS边框、边距、轮廓(边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移)——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式 实例 CSS 边框宽度 实例 特定边的宽度 实例 CSS 边框颜色 实例 特定边框的颜色 实例 HEX 值 实例 RGB 值 实例 HSL 值 实 ...
- 【Web基础入门】一文搞懂HTML + CSS + JavaScript 简单了解
html html是什么 超文本标记语言,运行在浏览器上 超文本:超级文本,如流媒体.声音.视频 标记语言:由大量的标签组成 标签:任何一个标签都有开始标签和结束标签 html不是编程语言,没有变量, ...
- 一文搞懂像素(px)、分辨率、CSS长度单位
博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目--多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试.就业.技术问题都可给在文章后 ...
- 一文搞懂【Web 前端】HTML 与 CSS 基础知识
摘要 一个 Web 页面是如何在浏览器上展示的?我们在浏览器上查看网页源代码,可看到众多的标签.符号和文字,这就是一个 HTML 文件,而浏览器可以将这个文件解析成一个 Web 页面.一个 Web 页 ...
- 一文搞懂css 2D动画效果
文章目录 前言 一.过渡动画效果简述 transition: 1.代码示例 2.效果展示 二.定位translate 1.2D定位 transform: translate(50%, 50%); ①. ...
- 【精选】一文搞懂css三大特性
文章目录 前言 一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
- 一文搞懂图像二值化算法
传统的机器视觉通常包括两个步骤:预处理和物体检测.而沟通二者的桥梁则是图像分割(Image Segmentation)[1].图像分割通过简化或改变图像的表示形式,使得图像更易于分析. 举个例子,食品 ...
- 一文搞懂css中精灵图如何使用
文章目录 前言 一.精灵图是什么? 1.概念: 2.图片示例: 二.为什么使用精灵图? 1.用户体验而言: 2.就开发者而言: 3.就服务器而言: 三.怎样使用精灵图 1.background-pos ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
最新文章
- python怎么写文件-Python读写文件
- Redis 高可用特性之 “持久化” 详解
- 笔记·mybatis核心对象和全局配置文件
- 15行代码AC——1019 数字黑洞 (20分) 甲级1069. The Black Hole of Numbers (20)(解题报告)
- 前端学习(1749):前端调试值之如何查看整站的资源和编辑
- UI设计素材|等轴测图(2.5D插画)
- git使用之搭建git仓库
- Python非本地语句
- mysql实现高效率随机取数据
- 4.GitLab 邮件配置
- PAT甲级1141 Ranking of Institutions
- 单片机STM8S测量电压电路_50个单片机晶振问题及解决方法小结
- MP3的采样率和比特率
- encode()和decode()
- 蓝桥杯2018年真题(4)动态规划摔手机
- exe文件在服务器上打不开,EXE格式文件打不开怎么办?三个方法教你打开
- springboot 之 微服务调用 之 链路追踪
- 5G网络部署行业应用的关键使能技术
- 是否想快速学习Java? 刻录所有Java教程书籍
- React TSLint中常见的问题及处理方法
热门文章
- linux clamav定时扫描,linux-clamAV
- solidity 中的时间_solidity基础知识
- C++ 利用结构体数组编写一个程序,对10名小学生的信息进行管理,学生结构体的成员包括姓名、学号、年龄、语文成绩、数学成绩、英语成绩、三门课总分等
- 2019年,这些豆瓣评分9.0以上的8本程序员好书你都知道吗?
- Crypto如何塑造数字革命 |链捕手
- PM——市场及用户分析(理论)
- python权限管理设置_python权限管理框架
- 基于javaweb+mysql的二手交易平台二手商城二手物品(前台、后台)
- 第二篇	基础篇—燃烧吧!我的雌雄双股剑! 第5回	二弟呀,面子工程很重要
- 旺宏norFlash Security Register OTP空间读写