background详解

已于 2024-04-12 15:02:08 修改
阅读量1.2k 收藏 25
点赞数 27
分类专栏： css 文章标签： 前端
于 2024-04-12 10:32:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40864647/article/details/137632155
版权
background详解
属性定义及使用说明

background 是 CSS 中的一个复合属性，用于设置元素的背景样式，包括颜色、图像、位置、大小、重复方式等。它可以简化为单独的背景属性，也可以一次性设置多个背景属性值。以下是 background 属性的一些详细说明：

语法

这条语句设置了背景颜色为红色（#f00），背景图片为 image.jpg，图片不重复显示（no-repeat），图片居中显示（center），图片大小按容器尺寸进行缩放以完全覆盖（cover），背景图像固定不动（fixed）。

background: background-color background-image background-repeat background-position/background-size background-attachment;
background: #f00 url("image.jpg") no-repeat center/cover fixed;
属性描述
background-color背景颜色
background-image背景图像
background-position背景位置
background-size背景尺寸
background-repeat背景重复
background-attachment背景附着
background-clip背景剪裁,不常用
background-origin背景原点,不常用
属性详解

  • background-color
    语法：默认transparent

    background-color: color;

    设置元素的背景颜色，比如 background-color: red; 将背景色设为红色。属性的值为颜色值或关键字transparent二者选其一。

    .container {
	width: 200px;
	height: 200px;
	background-color: red;
}

    效果如下：
    在这里插入图片描述

  • background-image
    可以设置一个或多个背景图像，例如 background-image: url("example.jpg"); 将背景设置为 example.jpg 图像。

    .container {
	width: 200px;
	height: 200px;
	background-image: url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202');
}

    效果如下：
    在这里插入图片描述
    设置多个背景图：

    .container {
	width: 200px;
	height: 200px;
	background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F24%2F20200224214726_ucqck.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1715412527&t=8b74772e8fa35ed288e50453a1eeb908'),url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202');
	background-repeat: no-repeat;
}

    效果如下：
    在这里插入图片描述
    在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。所以一般情况下都会指定background-color属性，如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。

  • background-position
    语法：

    background-position: x-axis y-axis;

    定义背景图像的位置，可以有top、right、bottom、left、center这五个值，也可以是百分比，也可以是具体的像素，可以单一使用，也可以两两组合使用，如 background-position: center top; 表示将图像放在元素的垂直顶部并水平居中。

    .container {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F24%2F20200224214726_ucqck.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1715412527&t=8b74772e8fa35ed288e50453a1eeb908');
	background-color: red;
    background-repeat: no-repeat;
}
.container1 {
    background-position: center top;
}
.container2 {
    background-position: center bottom;
}
.container3 {
    background-position: 50% 50%;
}

    效果如下：
    在这里插入图片描述

    .container {
    width: 200px;
    height: 200px;
    margin: 50px;
    background: red
        url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F24%2F20200224214726_ucqck.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1715412527&t=8b74772e8fa35ed288e50453a1eeb908');

    background-repeat: no-repeat;
}
.container1 {
    background-position: center top;
}
.container2 {
    background-position: center bottom;
}
.container3 {
    background-position: 50% 50%;
}

    如果换成一张小图：
    在这里插入图片描述

  • background-size
    语法：

    属性值描述
    length指定背景图片大小，不能为负值。
    percentage指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。
    auto以背景图片的比例缩放背景图片。
    cover缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。
    contain缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。
    background-size: size | cover | contain;

    设定背景图像的大小，如 background-size: 100% 100%; 表示图像填充整个元素区域；background-size: cover; 表示保持图像纵横比缩放至完全覆盖背景区域；background-size: contain; 表示保持图像纵横比缩放至内容适合背景区域。
    图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

    .container {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-image: url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202');
}
.container1 {
    background-size: 100% 100%;
}
.container2 {
    background-size: cover;
}
.container3 {
    background-size: contain;
}

    效果如下：
    在这里插入图片描述

  • background-repeat

    属性描述
    repeat图像会按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪，如果它的大小不合适的话。
    no-repeat图像不会被重复 (因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由background-position属性来决定。
    space图像会尽可能得重复，但是不会裁剪。第一个和最后一个图像会被固定在元素 (element) 的相应的边上，同时空白会均匀地分布在图像之间。background-position属性会被忽视，除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生，那就是图像太大了以至于没有足够的空间来完整显示一个图像。
    round随着允许的空间在尺寸上的增长，被重复的图像将会伸展 (没有空隙), 直到有足够的空间来添加一个图像。当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。例如，一个图像原始大小是 260px, 重复三次之后，可能会被伸展到 300px, 直到另一个图像被加进来。这样他们就可能被压缩到 225px.译者注：关键是浏览器怎么计算什么时候应该添加一个图像进来，而不是继续伸展。

    语法：

    background-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round;

    控制背景图像是否重复，如 background-repeat: no-repeat; 表示背景图像不重复显示。

    .container {
	width: 200px;
	height: 200px;
	background-image: url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202');
	background-repeat: repeat;
}

    此时图片大小是大于容器大小的，设置重复也不会有任何效果，且默认值就是repeat。效果同直接设置背景图片一样，效果如下：
    在这里插入图片描述
    让我们换一张小的的图片（48*48），设置同样的css，得到如下的效果：
    在这里插入图片描述
    其他属性：

    .container {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: red;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F24%2F20200224214726_ucqck.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1715412527&t=8b74772e8fa35ed288e50453a1eeb908');
}
.container1 {
    background-repeat: no-repeat;
}
.container2 {
    background-repeat: repeat-x;
}
.container3 {
    background-repeat: repeat-y;
}

    效果如下：
    在这里插入图片描述

  • background-attachment
    语法：

    background-attachment: scroll | fixed | local;

    指定背景相对于视口还是元素内容进行滚动，如 background-attachment: fixed; 表示背景图像固定不动，不会随着内容滚动。

    .container {
	width: 200px;
	height: 200px;
	overflow-x: hidden;
}
p {
	width: 200px;
	background-image: url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202');
	background-attachment: scroll;
}

    <div class="container">
	<p>
            There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle,
            wondering how she was ever to get out again.There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying
            every door, she walked sadly down the middle, wondering how she was ever to get out again.
	</p>
 </div>

    效果如下：
    在这里插入图片描述

    .container {
	width: 200px;
	height: 200px;
	overflow-x: hidden;
}
p {
	width: 200px;
	background-image: url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202');
	background-attachment: fixed;
}

    在这里插入图片描述

  • background-clip

    属性描述
    padding-box背景图像绘制到内边距（padding）外沿。不会绘制到边框处。
    border-box背景图像绘制到边框处
    content-box背景图像绘制到内边距（padding）外沿。不会绘制到内边距。
    text背景图像绘制到文字中。文字渐变常用到它。

    定义背景绘制的范围，语法：初始值为border-box

    background-clip: border-box | padding-box | content-box;

    .container {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: red;
    padding: 20px;
    border: 10px dashed red;
    background-image: url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202');
}
.container1 {
    background-clip: padding-box;
}
.container2 {
    background-clip: border-box;
}
.container3 {
    background-clip: content-box;
}

    效果如下：
    在这里插入图片描述

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

    渐变文字：

    .container {
    background: linear-gradient(60deg, red, yellow, red, yellow, red);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    margin: 50px;
}

    效果如下：
    在这里插入图片描述

  • background-origin

    属性描述
    padding-box背景图像的原点位置以padding为起始
    border-box背景图像的原点位置以border为起始
    content-box背景图像的原点位置以content为起始

    确定背景图像的原点位置的背景相对区域，语法：初始值为padding-box

    background-origin: border-box | padding-box | content-box;

    注意，当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。

    .container {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: red;
    padding: 20px;
    border: 10px dashed red;
    background-image: url('https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202');
}
.container1 {
    background-origin: padding-box;
}
.container2 {
    background-origin: border-box;
}
.container3 {
    background-origin: content-box;
}

    效果如下：
    在这里插入图片描述
    盒模型如下：
    在这里插入图片描述

V。on
关注
  • 27
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
background背景
离经叛道
07-06 238
background-color背景颜色 background-color 属性定义了元素的背景颜色.页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} CSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000" RGB - 如：“rgb(255,0,0)” 颜色名称 - 如：“red” background-image背景图像 background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，.
CSS3的background属性
Meskjei的博客
09-24 795
1、CSS背景图像的区域 background-clip：可以指定背景绘制的范围，共有三个范围 padding-box（背景内容仅显示在内边距及以内区域） border-box（背景内容仅显示在边框内） content-box（背景内容仅显示在内容区域） 举个例子 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&am
CSS background背景属性详解
最新发布
果酱味奶糖的博客
05-08 1599
CSS中的background属性是一个简写属性，用于在一个声明中设置所有背景相关的属性。这些属性可以单独设置，也可以在background属性中以简写形式一次性设置。
CSS背景background设置
pscool的博客
05-15 9265
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 文章目录1. 背景back-ground-colorbackground-imagebackground-repeatbackground-positionbackground-clipbackground-originbackground-sizebackground-attachmentbackground简写属性练习 1：按钮点击效果练习 2：让背景固定不动 1. 背景 back-ground-color .
html页面背景位置,background位置
weixin_42315537的博客
06-03 2020
css问题：如何用background定位我看一些大的网站上面，好多地方有用到图标的地方，都是将这些小图标整background:url(图片地址); background-position:12px -12px; //显示图片的X坐标 和Y坐标 简单的，你找一下background-position的用法，很多介绍的。css怎么调整背景图片的位置？background:url(/../../im...
background的属性和背景图片定位的实例
08-20 723
本文内容： 　　1.背景图片定位示例 　　2.background常用的属性值 　　3.background-repeat新增的round、space属性 　　4.background-size的属性值（着重介绍contain、cover） 　　5.background-origin属性值（borde-box、padding-box、content-box） 　　6.多背景图...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 887
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
背景background 7种样式及简写
m0_48462345的博客
11-30 2091
background相关标签，代码
Android加载View中Background详解
11-14
在Android开发中，View的Background是界面设计的关键元素，它通常是屏幕元素的底图或装饰。本文将深入探讨Android系统何时以及如何加载View中的Background，包括解析加载流程、优化资源管理以及实现动态换肤。 首先...
background-size使用详解
09-25
主要介绍了background-size使用详解,需要的朋友可以参考下
CSS background属性(背景属性)详解
12-07
•background-color 颜色 •background-position 位置 •background-size 大小 •background-repeat 如何重复背景图像 •background-origin 背景图片的定位区域 •background-clip 背景的绘制区域 •background-...
background的使用方法
热门推荐
linlinlinlinzi的博客
02-12 1万+
今天给大家分享的是background(背景)的五个属性,分别是background-color(背景颜色)、background-image(背景图片)、background-repeat(背景平铺)、background-position(背景位置)、background-attachment(背景固定);这五项在日常应用中用的比较多,兼容性也比较好,所以针对这五项分享一下.
CSS 背景图自动缩放background-size: cover；
HandsomeDanielWu的博客
10-07 1402
CSS 背景图自动缩放background-size: cover;
通过css的background熟悉设置背景图片自适应浏览器缩放
程序员的笔记
10-05 454
cover:图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被裁掉;contain:图片自身的宽高比不变，缩放至整个图片自身能完全显示出来;选项:contain或cover。
CSS之背景的设置 (六)：background-(image、repeat、size、position、attachment)、background、background-image和img对比
Good Good Study,Day Day Up!
05-16 1727
用于设置元素的背景图片。
改变背景图片的位置
qq_42816270的博客
01-28 1382
background-position 修改图片的位置 background-position-x 修改图片x方向的位置 background-position-y 修改图片y方向的位置
关于使用background属性给页面添加背景壁纸
MISSn270的博客
05-20 1151
1、body 方法 给body 添加图像 body 的方法可以实现更简单的添加。
css背景图片的位置：background的position
UFO
05-30 3185
position的两个参数：水平方向的位置，垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-repeat left top;  /*相当于0%  0%*/ 表示背景图片在指定div的位置，从左上角开始 2.background:url(../image/header.jpg) no
CSS背景background和显示元素
weixin_58139900的博客
09-22 610
CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。 背景颜色background-color ckground-color 属性，设置元素的背景颜色。 常用的值 color_name 规定颜色值为颜色名称的背景颜色（比如 red） hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0
cssbackground详解
08-16
background是一个用于设置元素背景样式的CSS属性。它可以包含多个子属性，用于设置背景颜色、背景图片、背景位置、背景大小、背景平铺方式等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【CSS】css的background属性用法详解，background常用缩写形式](https://blog.csdn.net/weixin_42960907/article/details/124865319)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [CSS之background深度详解](https://blog.csdn.net/kk_yanwu/article/details/79489242)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值