背景样式属性

背景样式属性 | 学习笔记

2022-01-11 93

版权

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

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

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

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

内容介绍

一、表格简介

二、范例：代码演示

一、表格简介

属性	值	含义
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.ipga) no-repeat center center fixed	设器背景的简写形式

二、范例：代码演示

图中代码如下：

< !DOCTYPE html>

背景图片的位置

.box{

width:1000px;height: 600px;

border: 1px solid #000;margin-right: auto;

margin-Left: auto;

background-image: url(./images/1.jpg);I/*让背景图片不平铺*/

background-repeat: no-repeat;

}

图中代码如下：

< !DOCTYPE html>

背景图片的位置

.box{

width:1000px;height: 600px;

border: 1px solid #000;margin-right: auto;

margin-Left: auto;

background-image: url(./images/1.jpg);I/*让背景图片不平铺*/

background-repeat: no-repeat;

}

注意：

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

l background-position：水平位置垂直位置这两个位置的表示方式有三种英文单词固定值百分比这三种方式可以混合使用可以同时使用英文单词或者是固定值或者是百分比

l 英文单词的表示方式

l 水平位置：left（居左）, center(居中), right(居右)

l 垂直位置：top（居上）, center(居中), bottom(居下)

l 固定值的表达方式

l 百分比的表达方式

l Background：简写属性它可以同时设置多个样式比如背景颜色，背景图片，背景图片是否平铺水平位置垂直位置

l Background：简写属性其值的个数不定顺序也不一定每一个值之前使用空格分隔

背景样式属性 | 学习笔记