前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【CSS】背景样式:background

【CSS】背景样式:background

作者头像
毛大姑娘
发布于 2021-05-08 06:43:04
发布于 2021-05-08 06:43:04
1.7K00
代码可运行
举报
文章被收录于专栏:向全栈出发向全栈出发
运行总次数:0
代码可运行

本节主要关注背景如何展示。

background

在一个声明中设置所有背景属性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
div{
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}

可以按顺序设置如下属性:

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

background 值

作用

CSS版本

background-color

规定要使用的背景颜色。

1

background-position

规定背景图像的位置。

1

background-size

规定背景图片的尺寸。

3

background-repeat

规定如何重复背景图像。

1

background-origin

规定背景图片的定位区域。

3

background-clip

规定背景的绘制区域。

3

background-attachment

规定背景图像是否固定或者随着页面的其余部分滚动。

1

background-image

规定要使用的背景图像。

1

inherit

规定应该从父元素继承 background 属性的设置。

1

background-color

设置背景颜色。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
div{
  background-color:#00ff00;
}

background-color 值

作用

color_name

规定颜色值为颜色名称的背景颜色(比如 red)。

hex_number

规定颜色值为十六进制值的背景颜色(比如 #ff0000)。

rgb_number

规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。

transparent

默认。背景颜色为透明。

inherit

规定应该从父元素继承 background-color 属性的设置。

background-image

设置背景图片。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
div{
  background-image:url(bgimage.gif);
}

background-image 值

作用

url('URL')

指向图像的路径。

none

默认值。不显示背景图像。

inherit

规定应该从父元素继承 background-image 属性的设置。

background-clip

规定背景的绘制区域。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
div{
  background-clip:content-box;
}

background-clip 值

作用

border-box

背景被裁剪到边框盒。

padding-box

背景被裁剪到内边距框。

content-box

背景被裁剪到内容框。

background-repeat

设置如何重复背景图像。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
div{
  background-repeat: repeat-y;
}

background-repeat 值

作用

repeat

默认。背景图像将在垂直方向和水平方向重复。

repeat-x

背景图像将在水平方向重复。

repeat-y

背景图像将在垂直方向重复。

no-repeat

背景图像将仅显示一次。

inherit

规定应该从父元素继承 background-repeat 属性的设置。

background-size

规定背景图像的尺寸。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
div{
  background-size:80px 60px;
}

background-size 值

作用

length

设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。

contain

把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
CSS3新增属性
(背景图片可以放置于 content-box、padding-box 或 border-box 区域。)
且陶陶
2023/04/12
6190
CSS3新增属性
9.背景样式-CSS基础
一、背景样式 在CSS中,背景样式包括两个方面:背景颜色、背景图片。 在Web2.0 时代,对于元素的背景样式,我们都是使用CSS属性来实现。但在Web1.0时代,都是使用background或者 bgcolor这两个HTML属性(不是CSS属性)来为元素定义背景颜色或背景图片。 1.常用背景样式属性 属性 说明 background-color 定义背景颜色。 background-image 定义背景图片地址。 background-repeat 定义背景图片重复。 background-pos
见贤思齊
2020/10/29
1.1K0
9.背景样式-CSS基础
【CSS】港真,我自己都怕CSS属性简写
闲置在家,没有工作,咸鱼到月底。加上最近在大佬的建议下搭个人博客,于是把自己的笔记整理了一下,捣鼓捣鼓,发点文章
神仙朱
2019/08/02
6000
【CSS】港真,我自己都怕CSS属性简写
CSS背景缩写、简写详细
CSS背景缩写、简写 不太会这个,到网上搜了下,发现写的都不中意,就想到自己写一个出来 背景共有8个属性: background-color    背景颜色 background-position    背景图像的位置 background-size     背景图片的尺寸 background-repeat   如何重复背景图像 background-origin     背景图片的定位区域 background-clip      背景的绘制区域  /* 底部详细说明 */ back
我不是费圆
2020/09/21
2.4K0
CSS背景缩写、简写详细
你可能不是那么了解的 CSS Background
Background,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,背景嘛。MDN 中对其的定义如下:
政采云前端团队
2020/02/14
1.4K0
你可能不是那么了解的 CSS Background
[Java小工匠]CSS背景1-概述
background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
Java小工匠
2018/08/10
6230
CSS:背景属性
如果背景一直都是一成不变的,对于一个网页还是挺无趣的,为了让背景更加的生动,可以修改它的颜色。 语法:
Yui_
2025/02/03
1400
CSS:背景属性
Css3新特性总结之边框与背景(一)
本系列主要总结Css3一些新特性的认识,来源于《css揭秘》书。 一、半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360);s:饱合度(0%~100%);l:亮度(0%~100%);a:透明度(0~1) background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border);padding-box(背景颜色扩散到padding);content-box(背景颜色扩展到content) 示例代码: width:200px; height:20
sam dragon
2018/01/17
8260
零基础跟我学前端之css3基础
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dvIduY4W-1629980842687)(/assetis/image-20210325000539132.png)]
张哥编程
2024/12/19
850
一篇文章带你了解CSS3 背景知识
CSS3允许你为一个元素添加多个背景图像, 通过使用 background-image 属性.不同的背景图像用逗号隔开,图像叠加在一起,
前端皮皮
2020/11/26
6420
一篇文章带你了解CSS3 背景知识
深入常用CSS声明(一) —— Background
一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这些声明的属性和值的时候做到不陌生。 这里后续还会增加更多自己在工作和学习中的一些css声明,供自己查阅,也提供给大家看看。 github background-image 用于指定一个容器的背景图片,主要的值有三个: none 无背景图片(默认) url(/* image path */) 指定的图片地址 inherit 继承自父容器 当背景图片默认
糊糊糊糊糊了
2018/05/09
1.8K0
深入常用CSS声明(一) —— Background
CSS征途之Background点滴
CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,且能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。如此强大,怎能不去学习一下?而这里就记录下CSS学习使用关于Background的点滴,毕竟好记性不如烂笔头。 Background基础知识 Background语法 backgr
晚晴幽草轩轩主
2018/03/27
1.6K0
CSS3 Background 属性介绍
与border类似,ie对新的background属性都是不支持的。多的就不说了,来看看,新的background 属性吧。
py3study
2020/01/14
7310
CSS background属性
background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:
Devops海洋的渔夫
2019/06/02
1.4K0
CSS3-边框和背景
CSS3中边框和样式得到了增强。例如:可以创建圆角边框,使用图像边框,为元素创建阴影。
奋飛
2019/08/15
1.4K0
css渲染(三)颜色与背景
颜色的应用主要分为前景色、背景色和透明三个部分。 一、前景色 color   color前景色   值: <color> | inherit   初始值: 用户代理特定的值   应用于: 所有元素   继承性: 有 一般来说,前景是元素的文本,不过前景还包括元素周围的边框。有两种方式直接影响一个元素的前景色,可以使用color属性,也可以使用属性border-color设置边框颜色。 二、透明度 opacity   opacity是CSS3中专门用来设置透明度的一个属性,opacity只能给整个元素设置一个
柴小智
2018/04/10
1.4K0
IT课程 CSS基础 023_图片、背景
图片是网页中非常重要的媒体类型,恰到好处的使用图片可以使网页多彩生动,不再局限冷冰冰的文字。
zhaoJian.Net
2024/04/03
1450
IT课程 CSS基础 023_图片、背景
css基础教程之边框背景
1.border:<line-width> || <line-style> || <color>
老雷PHP全栈开发
2020/07/02
9960
从零开始学 Web 之 CSS3(三)渐变,background属性
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变。
Daotin
2018/08/31
1.9K0
从零开始学 Web 之 CSS3(三)渐变,background属性
六. CSS 样式补充之 font & background
font-face可以将服务器中的字体直接提供给用户去使用 问题: 1.加载速度 2.版权 3.字体格式
小海怪的互联网
2020/10/26
2K0
相关推荐
CSS3新增属性
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验