re:从0开始的CSS之旅 19. 背景

1. 背景相关属性

  1. background-color 设置背景颜色
    transparent 透明的(默认值)

  2. background-image 设置背景图片

    可选值:
    none 无背景图片(默认值)
    url() 背景图片路径

  3. backgroung-repeat 设置背景平铺

    可选值:
    repeat 平铺(默认值)
    no-repeat 不平铺
    repeat-x 水平平铺
    repeat-y 垂直平铺

  4. background-position 设置背景图像位置
    background-position: x y
    x代表水平位置 y代表垂直位置,xy的值可以是:

    1. 像素

    2. 百分比

    3. top right bottom left center

    注意:

    1. xy的值可以混合使用

    2. 若我们值规定了一个值,另外一个默认值为center

  5. background-attachment 设置背景图像的滚动方式

    可选值:
    scroll 背景图片会随着页面中其余部分滚动(默认值)
    fixed 当页面中其余部分滚动,背景图片位置不变

背景的简写属性:background
background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置;
上述顺序无要求

示例如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	body {
		height: 2000px;
	
		/* 背景简写属性 */
		background: transparent url("../../01.HTML/dream.gif") no-repeat fixed center center;
	}
	
	.box1 {
		width: 600px;
		height: 600px;
		margin: 10px auto;
	
		/* 设置背景颜色 */
		background-color: #c7edcc;
	
		/* 设置背景图片 */
		background-image: url(../../01.HTML/images/image.png);
	
		/* 设置背景平铺 */
		background-repeat: no-repeat;
	
		/* 设置背景图片位置 */
		background-position: top right;
	
		/* 设置背景图片滚动 */
		background-attachment: scroll;
	}

</head>

<body>
	<div class="box1"></div>

	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod facere adipisci odio! Est voluptatibus laboriosam
		perferendis, repudiandae ipsam facere ad dolorum mollitia voluptas et accusantium quae. Sapiente molestiae
		dignissimos earum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, necessitatibus eius. Sed,
		consequatur voluptatem saepe unde, numquam error delectus minus perspiciatis quod cupiditate dolore incidunt
		neque est laboriosam voluptas a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto molestias
		excepturi nostrum dicta sapiente omnis, aliquid debitis distinctio asperiores nobis amet in cumque veritatis
		illum vitae sequi aspernatur ipsum hic? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam
		accusamus necessitatibus ipsam atque vitae nostrum repellendus omnis laborum ut quam fugit reprehenderit
		obcaecati consequuntur architecto amet, libero ullam, blanditiis incidunt. Lorem, ipsum dolor sit amet
		consectetur adipisicing elit. Ratione ut dolorem non quia, quasi facilis repellat, veritatis atque esse neque
		magni optio totam vel in sit, delectus consectetur earum! Magnam. Lorem ipsum dolor sit amet consectetur,
		adipisicing elit. Blanditiis deserunt ea totam voluptatum? Corporis, doloribus a qui veritatis, ullam ducimus
		modi tempore blanditiis eius velit nostrum voluptate, provident ex expedita?Lorem ipsum dolor sit amet
		consectetur adipisicing elit. Ea, assumenda laboriosam nobis debitis qui amet mollitia tenetur vitae nisi
		incidunt officia, consectetur omnis reiciendis error rem impedit voluptatem voluptatibus? Cumque?
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod facere adipisci odio! Est voluptatibus laboriosam
		perferendis, repudiandae ipsam facere ad dolorum mollitia voluptas et accusantium quae. Sapiente molestiae
		dignissimos earum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, necessitatibus eius. Sed,
		consequatur voluptatem saepe unde, numquam error delectus minus perspiciatis quod cupiditate dolore incidunt
		neque est laboriosam voluptas a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto molestias
		excepturi nostrum dicta sapiente omnis, aliquid debitis distinctio asperiores nobis amet in cumque veritatis
		illum vitae sequi aspernatur ipsum hic? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam
		accusamus necessitatibus ipsam atque vitae nostrum repellendus omnis laborum ut quam fugit reprehenderit
		obcaecati consequuntur architecto amet, libero ullam, blanditiis incidunt. Lorem, ipsum dolor sit amet
		consectetur adipisicing elit. Ratione ut dolorem non quia, quasi facilis repellat, veritatis atque esse neque
		magni optio totam vel in sit, delectus consectetur earum! Magnam. Lorem ipsum dolor sit amet consectetur,
		adipisicing elit. Blanditiis deserunt ea totam voluptatum? Corporis, doloribus a qui veritatis, ullam ducimus
		modi tempore blanditiis eius velit nostrum voluptate, provident ex expedita?Lorem ipsum dolor sit amet
		consectetur adipisicing elit. Ea, assumenda laboriosam nobis debitis qui amet mollitia tenetur vitae nisi
		incidunt officia, consectetur omnis reiciendis error rem impedit voluptatem voluptatibus? Cumque?
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod facere adipisci odio! Est voluptatibus laboriosam
		perferendis, repudiandae ipsam facere ad dolorum mollitia voluptas et accusantium quae. Sapiente molestiae
		dignissimos earum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, necessitatibus eius. Sed,
		consequatur voluptatem saepe unde, numquam error delectus minus perspiciatis quod cupiditate dolore incidunt
		neque est laboriosam voluptas a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto molestias
		excepturi nostrum dicta sapiente omnis, aliquid debitis distinctio asperiores nobis amet in cumque veritatis
		illum vitae sequi aspernatur ipsum hic? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam
		accusamus necessitatibus ipsam atque vitae nostrum repellendus omnis laborum ut quam fugit reprehenderit
		obcaecati consequuntur architecto amet, libero ullam, blanditiis incidunt. Lorem, ipsum dolor sit amet
		consectetur adipisicing elit. Ratione ut dolorem non quia, quasi facilis repellat, veritatis atque esse neque
		magni optio totam vel in sit, delectus consectetur earum! Magnam. Lorem ipsum dolor sit amet consectetur,
		adipisicing elit. Blanditiis deserunt ea totam voluptatum? Corporis, doloribus a qui veritatis, ullam ducimus
		modi tempore blanditiis eius velit nostrum voluptate, provident ex expedita?Lorem ipsum dolor sit amet
		consectetur adipisicing elit. Ea, assumenda laboriosam nobis debitis qui amet mollitia tenetur vitae nisi
		incidunt officia, consectetur omnis reiciendis error rem impedit voluptatem voluptatibus? Cumque?
	</p>
</body>

</html>
相关推荐
懒大王952716 分钟前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
yinuo23 分钟前
Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)
前端
xkroy41 分钟前
ajax
前端·javascript·ajax
Yvonne爱编码1 小时前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
闲人编程1 小时前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang1 小时前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区1 小时前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木1 小时前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩1 小时前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple