CSS背景设置详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41696334/article/details/104187505

CSS设置背景

css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

background

body {
	background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
}

JavaScript语法👇

object.style.background="white url(paper.gif) repeat-y"

值	描述
`background-color`	规定要使用的背景颜色
`background-position`	规定背景图像的位置
`background-size`	规定背景图片的尺寸
`background-repeat`	规定如何重复背景图像
`background-origin`	规定背景图片的定位区域
`background-clip`	规定背景的绘制区域
`background-attachment`	规定背景图像是否固定或者随着页面的其余部分滚动
`background-image`	规定要使用的背景图像
`inherit`	规定应该从父元素继承`background`属性的设置

背景色

可以使用background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。

把元素北京设置为灰色👇

p {
	background-color: gray;
}

把背景色从元素中的文本向外延伸只需要增加内边距👇

p {
	background-color: gray; padding: 20px;
}

可以为所有元素设置背景色。
background-color不能继承，其默认值是transparent（透明）。

background-color

元素背景的范围
1. background-color属性为元素设置一种纯色
2. 背景色会填充元素的内容，内边距和边框区域，扩张到元素边框的外界（但不包括外边距）
3. 如果边框有透明部分（比如虚线边框），会透过这些透明部分显示出背景颜色
transparent值在大多数情况下没有必要使用
JavaScript语法：👇

object.style.backgroundColor=“#00FF00”

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如red）
hex_number	规定颜色值为十六进制值的背景颜色（比如#ff0000）
rgb_number	规定颜色值为rgb代码的背景颜色（比如rgb（255，0，0））
`transparent`	默认。背景颜色为透明
`inherit`	规定从父元素继承`background-color`属性

背景图像

要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none图像。

如果需要设置一个背景图片，必需为这个属性设置一个URL值👇

body {
	background-image: url(/i/abc.gif);
}

我们还可以为段落设置背景图片，而不影响文档的其他部分👇

p.flower {
	background-image: url(/i/abc.gif);
}

我们甚至可以为行内元素设置背景图片👇

a.radio {
	background-image: url(/i/eg_bg_07.gif);
}

理论上可以为所有元素设置背景图像，但是会影响用户体验
background-image也不能继承。实际上所有背景属性都不能继承

background-image

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
默认的，背景图像位于元素的左上角，并在水平和垂直的放i按上重复
提示：请设置一种可用的背景颜色，这样的话，加入背景图像不可用，页面也可以获得良好的视觉效果
根据background-repeat属性，图像可以无限平铺，沿着某个轴（x轴或y轴）平铺，或者根本不平铺
初始背景图像（原图像）根据background-position属性的值放置。
JavaScript语法👇

object.style.backgroundImage="abc.gif"

值	描述
url	指向图像的路径
`none`	默认值。不显示背景图像
`inherit`	规定从父元素继承`background-image`属性

背景重复

如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。属性值repeat导致图像在水平垂直方向上都平铺。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
默认的，背景图像将从一个元素的左上角开始。

background-repeat

原图由background-image定义，根据background-position的值放置。background-repeat负责定义平铺模式
JavaScript语法👇

object.style.backgroundRepeat="repeat-y"

值	描述
`repeat`	默认。背景图像将在垂直和水平方向重复
`repeat-x`	背景图像将在水平方向重复
`repeat-y`	背景图像将在垂直方向重复
`no-repeat`	背景图像将仅显示一次
`inherit`	规定引发i从父元素继承`background-repeat`属性的设置

背景定位

可以利用background-position属性改变图像在背景中的位置。

为background-position属性设置属性

JavaScript语法👇

object.style.backgroundPosition="center"

关键字：top、bottom、left、right和center。

通常说这些关键字是成对出现的，不过不是肯定的。
规定关键字可以按任何顺序出现，只要保证不超过两个——一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则另一个默认关键字是center。

百分数值：50%，75%

body{ 
    background-image:url('/i/demo.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
}

👆会导致图像在其元素中居中。
百分数值会使图像的中心与元素的中心对齐（百分数值同时应用于元素和图像），也就是说图像中50% 50%的点（中心点）与元素中50% 50%的点（中心点）对齐。
如果图像位于0% 0%，图像放在元素的左上角。
如果图像位于100% 100%，图像放在元素的右下角。
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将默认为50%，这一点与关键字类似。
background-position默认值是0% 0%（左上角）。

长度值：100px或5px。

body{ 
    background-image:url('/i/demo.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
 }

长度值解释的是元素内边距左上角的便宜，偏移点是图像的左上角。
比如设置值为50px 100px，图像的左上角将在元素内边距左上角向右50像素，向下100像素的位置上。
与百分数值不同的是，偏移是从左上角到另一个左上角。

background-origin

background-origin属性规定background-position属性相对于什么位置来定位。
注意：如果背景图像的background-attachment属性为"fixed"，则该属性没有效果。
JavaScript语法👇

object.style.backgroundOrigin="content-box"

值	描述
`padding-box`	背景图像相对于内边距框来定位
`border-box`	背景图像相对于边框盒来定位
`content-box`	背景图像相对于内容框来定位

background-clip

JavaScript语法👇

object.style.backgroundClip="content-box"

值	描述
`border-box`	背景被裁剪到边框盒
`padding-box`	背景被裁剪到内编辑框
`content-box`	背景被裁剪到内容框

背景关联

默认情况下当文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。单文档滚动到图像的位置时，图像就会消失。
我们可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动影响。

background-attachment

JavaScript语法

	object.style.backgroundAttachment="fixed"

值	描述
`scroll`	默认。背景图像会随着页面其余部分的滚动而移动
`fixed`	当页面的其余部分滚动时，背景图像不会滚动
`inherit`	规定应该从父元素继承`background-attachment`属性的设置