1. 背景相关属性
-
background-color
设置背景颜色transparent
透明的(默认值) -
background-image
设置背景图片
可选值:none
无背景图片(默认值)url()
背景图片路径 -
backgroung-repeat
设置背景平铺
可选值:repeat
平铺(默认值)no-repeat
不平铺repeat-x
水平平铺repeat-y
垂直平铺 -
background-position
设置背景图像位置background-position: x y
x
代表水平位置y
代表垂直位置,x
和y
的值可以是:
1. 像素
2. 百分比
3.top right bottom left center
注意:
1.x
和y
的值可以混合使用
2. 若我们值规定了一个值,另外一个默认值为center
-
background-attachment
设置背景图像的滚动方式
可选值:scroll
背景图片会随着页面中其余部分滚动(默认值)fixed
当页面中其余部分滚动,背景图片位置不变
背景的简写属性:background
background
:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置;
上述顺序无要求文章来源:https://www.toymoban.com/news/detail-826114.html
示例如下:文章来源地址https://www.toymoban.com/news/detail-826114.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>
到了这里,关于re:从0开始的CSS之旅 19. 背景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!