首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >第96天:CSS3 背景详解

第96天:CSS3 背景详解

作者头像
半指温柔乐
发布于 2018-09-11 03:18:59
发布于 2018-09-11 03:18:59
30300
代码可运行
举报
文章被收录于专栏:前端知识分享前端知识分享
运行总次数:0
代码可运行

一、背景大小

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background: url("images/bg.jpg") no-repeat;
控制背景的大小
1、具体数值
background-size: 500px 500px;
2、百分比
background-size: 50% 50%;
3、cover、contain参数
  • cover 完全覆盖盒子,不一定全部显示
  • background-size: cover;
  • contain 背景图片最大化在盒子中等比显示,但不一定能铺满盒子
  • background-size: contain;

二、全屏背景自适应

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1 body{
2             background: url("images/2.jpg") no-repeat center;
3             /*background-size: 100% 100%;*/
4             background-size: cover;/*全屏背景自适应*/
5         }

三、背景原点

background-origin  背景原点 控制背景从什么地方开始显示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 .box{
 2             width: 500px;
 3             height: 500px;
 4             border:30px solid rgba(0,255,0,0.8);
 5             padding: 30px;
 6             background: url(images/bg.jpg) no-repeat ;
 7             /*背景原点 控制背景从什么地方开始显示*/
 8             /*background-origin: padding-box;默认值*/
 9             /*background-origin: border-box;*//*盒子最外面开始*/
10             background-origin: content-box;/*盒子内容区域开始*/
11         }

四、添加多个背景

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
给盒子加多个背景,按照背景语法格式写,多个背景使用逗号隔开
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 .box{
 2             width: 624px;
 3             height: 416px;
 4             border: 1px solid #000;
 5             margin: 100px auto;
 6             /*给盒子加多个背景,按照背景语法格式写,多个背景使用逗号隔开*/
 7             background: url(images/bg1.png) no-repeat left top
 8                         ,url(images/bg2.png) no-repeat right top
 9                         ,url(images/bg3.png) no-repeat right bottom
10                         ,url(images/bg4.png) no-repeat left bottom
11                         ,url(images/bg5.png) no-repeat center;
12         }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端学习(8)~css学习(二):背景属性
光学显示器中,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。r、g、b的值,每个值的取值范围0~255,一共256个值。
Vincent-yuan
2020/02/25
1.5K0
前端学习(8)~css学习(二):背景属性
css3的一些新属性总结
box-sizing规定了盒子的计算方式,常用于消除hover时,盒子之间的影响,有三个属性:
一个淡定的打工菜鸟
2018/09/06
3960
CSS3(网页背景)
在CSS3之前,网页中背景图片的尺寸往往是图片的实际尺寸,我们无法在网页中规定它的大小尺寸。但是在CSS3中我们可以规定它的尺寸,方便了我们在网页中使用不同尺寸但相同图片的背景。
全栈开发日记
2022/05/12
5790
CSS3(网页背景)
【前端】CSS背景属性详解
background-color 属性用于定义元素的背景颜色,可以是任何合法的 CSS 颜色值,包括十六进制颜色代码、RGB、RGBA、HSL 等。元素的默认背景颜色是 transparent(透明),这意味着没有显式的背景颜色。
CSDN-Z
2025/06/01
1630
【前端】CSS背景属性详解
html背景图片的设置宽高_网页的背景图片怎么设置
background-size:设置背景图大小,它的属性值有:cover、contain和具体的宽度和高度值 (1)cover:浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况下,有些图像可能会跳出盒子外,也就是说图像铺满了盒子,但是会有一部分被剪切了
全栈程序员站长
2022/11/10
5.5K0
html背景图片的设置宽高_网页的背景图片怎么设置
H5C3第一节
CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强 或新增 了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。 CSS3的现状 PC端浏览器支持程度差,需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛 关于私有前缀: 在标准还未确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确定下来的标准进行兼容,所以每种浏览器使用了自己的私有前缀与标准进行区分,当标准确立后,各大浏览器将逐步支持不带前缀的css3新属性 目前
用户3461357
2019/08/02
1.1K0
H5C3第一节
一篇文章带你了解CSS3 背景知识
CSS3允许你为一个元素添加多个背景图像, 通过使用 background-image 属性.不同的背景图像用逗号隔开,图像叠加在一起,
前端皮皮
2020/11/26
6910
一篇文章带你了解CSS3 背景知识
【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 / cover / contain 值 )
盒子模型 的 背景图片尺寸 是通过 background-size 属性 设置的 , 语法如下 :
韩曙亮
2023/04/24
1.2K0
【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 / cover / contain 值 )
css基础教程之边框背景
1.border:<line-width> || <line-style> || <color>
老雷PHP全栈开发
2020/07/02
1.1K0
从零开始学 Web 之 CSS3(三)渐变,background属性
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变。
Daotin
2018/08/31
2.1K0
从零开始学 Web 之 CSS3(三)渐变,background属性
CSS3背景
在CSS3中,背景定位得到了扩展,它允许我们指定背景图片在距离任意角的偏移量,只需要在偏移量前面指定关键字
踏浪
2019/07/31
8380
CSS笔记
@import url(xx.css): 在一个css中,添加对其他css文件的引用
tandaxia
2018/09/27
1.6K0
CSS笔记
【CSS】:颜色、背景
CSS 数据类型 <color> 表示一种标准RGB色彩空间(sRGB color space)的颜色。一种颜色可以用以下任意的方式来描述:
WEBJ2EE
2020/03/02
3.2K0
CSS3背景
在CSS3之前我们对背景图片的控制极为有限,只能决定其来源、位置、重复,CSS3的到来对背景的使用开辟了一片新天地。 1、background-size 在 CSS3中,background-size 属性规定背景图像的尺寸。这就允许我们在不同的环境中重复使用背景图片,以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。 length:设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto。 percentage: 以父元素的
小胖
2018/06/27
1.1K0
CSS实现背景图片右侧定位的5种小技巧
说到背景图片右侧定位,大家一定会想到使用background-position属性来实现。
歪马
2020/04/07
5.2K0
CSS实现背景图片右侧定位的5种小技巧
02-移动端开发教程-CSS3新特性(中)
根据文章内容,撰写摘要总结。
老马
2017/12/20
2.3K0
CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1.1、文字阴影 text-shadow <
张果
2018/01/04
3.4K0
CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
【CSS】港真,我自己都怕CSS属性简写
闲置在家,没有工作,咸鱼到月底。加上最近在大佬的建议下搭个人博客,于是把自己的笔记整理了一下,捣鼓捣鼓,发点文章
神仙朱
2019/08/02
6150
【CSS】港真,我自己都怕CSS属性简写
css3(animate)
1.animate //----------------------------------- <!--复合属性。检索或设置对象所应用的动画特效--> <' animation-name '>: 检索或设置对象所应用的动画名称 <' animation-duration '>: 检索或设置对象动画的持续时间 <' animation-timing-function '>: 检索或设置对象动画的过渡类型 <' animation-delay '>: 检索或设置对象动画延迟的时间 <' animat
天天_哥
2018/09/29
1.2K0
CSS3 Background 属性介绍
与border类似,ie对新的background属性都是不支持的。多的就不说了,来看看,新的background 属性吧。
py3study
2020/01/14
7680
相关推荐
前端学习(8)~css学习(二):背景属性
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验