背景样式属性

背景样式属性 | 学习笔记

2022-01-11 113

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 快速学习背景样式属性。

开发者学堂课程【CSS 快速掌握：背景样式属性】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/611/detail/9185

内容介绍

一、background-color

二、background-image

三、background-repeat

属性	值	含义
background-color	#ff0000、red、rgb(255,0,0)	背景颜色
background-image	url(图像路径和名称);	背景图像
background-repeat	repeat repeat-x repeat-y no-repeat	背景图像是否重复
background-position	center center或x% y%或xpos ypos	背景图像起始位置
background-attachment	scroll(滚动)、fixed(固定)	设置背景图像是否固定或者随着页面的其余部分滚动。
background	url(1.jipg) no-repeat center center	设置背景的简写形式

一、background-color

background-color :用于给元素设置背景颜色但是前提这个元素要么有内容，要么有宽度和高度才可以。

范例：

<style type="text/css">

.box{

width : 100px;

height: 10ep×;

background-color: #f00;

}

</style>

</ head>

<body>

<div class="box"></div>

</body>

</ htm1>

二、background-image

background-image 用于给元素设置背景图片︰图片的地址一定放在 url (图片的地址)但是前提这个元素要么有内容，要么有宽度和高度才可以-背景图片默认是平铺的

范例：

<head>

<meta charset="UTF-8">

<title>背景图片</title>

<style type="text/css">

.box{

width: 100epx;

height: 1000px:

background-image :uri( ./images/3.jpg）

}

< / style>

< / head>

<body>

<div class="box"></div>

</ body>

</ htm1>

三、background-repeat

background-repeat 是用于设置背景图片是否平铺 repeat (是平铺)、repeat-x (水平方向平铺) repeat-y (垂直方向平铺)、no-repeat (不平铺)

范例1：

<style type="text/css">

.box{

width: 100epx;

height: 100epx;

border: 1px solid #f00;

background-image:url(./images/3.jpg); /*background-repeate*/

background-repeat: no-repeat;/*表示图片是平铺的*/

}

</ style>

</ head>

<body>

<div class=box"></div>

< / body>

</ htm1>

范例2：

<style type="text/css">

.box{

width : 10eepx;

height: 800px;

border : 1px solid #f00;

background-image:url(./images/bg.png)

background-repeat: repeat-x;/*让背景图片只在水平方向进行平铺*/

}

</style>

</ head>

<body>

<div class="box "></div>

</ body>

</ html>

背景样式属性 | 学习笔记