<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style>
/*
一。背景
1.background-color 设置背景颜色
transparent 透明的（默认值）
2.background-image 设置背景图片
可选值：
none 无背景图片（默认值）
url（）背景图片路径
3.background-repeat 设置背景平铺
可选值：
repeat 平铺（默认值）
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
4.background-position 设置背景图像位置
background-position：x y
x代表水平位置 y代表垂直位置，x和y的值可以是：
1.像素
2.百分比
3.关键字 top right bottom left center
注意:
1.X和y的值可以混合使用，例如：background-position:100px center;
2.若我们只规定了一个值，另一个默认值为center
5。background-attachment 设置背景图形的滚动方式
可选值：
scroll 背景图片会随着页面中其余部分滚动（默认值）
fixed 当页面中其余部分滚动，背景图片位置不变
二、背景的简写属性：background
background：背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置；
上述顺序无要求
*/
body{
height: 2000px;
/*背景简写属性*/
background: transparent url(../周渝皓的个人网站/tp/mm.jpg) no-repeat fixed center center;
}
.box1{
width: 600px;
height: 600px;
margin: 10px auto;
/*设置背景颜色*/
background-color: #c7edcc;
/*设置背景图片*/
background-image: url(../周渝皓的个人网站/tp/mm.jpg);
/*设置背景平铺*/
background-repeat: no-repeat;
/*设置背景图片位置*/
background-position: 100px center;
/*设置背景图片滚动*/
background-attachment: scroll;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!</p>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)