HTML——背景属性

一、背景属性

1.背景颜色

background-color

2.背景图片

background-image:url():

3.背景平铺（默认平铺）

background-repeat

background-repeat:no-repeat/repeat/repeat-x/repeat-y;

repeat-x:x轴平铺

repeat-y:y轴平铺

no-repeat:不平铺

4.背景图片定位

background-position

background-position:水平位置垂直位置;可以给负值

5.图片大小

background-size

背景图片的大小：400px 400px/100% 100%

contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子，留白

background-size: contain;

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在定位区域中

background-size: cover;

6.背景图片的固定

background-attachment : scroll(滚动)/ fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了);

二、代码演示

<!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>Document</title><style>     /* 默认平铺repeat-x:x轴平铺repeat-y:y轴平铺no-repeat:不平铺 */.box1{height: 2000px;width: 200px;background-color: violet;background-image: url(qianxun.jpg);background-repeat: no-repeat;background-position:top;background-size:auto; /* margin:两个参数，第一个表示上下边距，第二个表示左右编辑0：上下边界为0。 auto：第一个表示上下边距，第二个表示左右编辑 */margin: 0 auto;background-attachment: fixed;}.box2{height: 2000px;width: 500px;/* 背景颜色 */background-color: teal;/* 背景图片 */background-image: url(baidu.png);/* 背景图片的定位：background-position:水平位置垂直位置;可以给负值 */background-position:left top;/* 背景图片的平铺：background-repeat:no-repeat/repeat/repeat-x/repeat-y; */background-repeat: no-repeat;/* 背景图片的大小：400px 400px/100% 100% *//* contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子，留白 *//* background-size: contain; *//* cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在定位区域中 *//* background-size: cover; */background-size: auto; /* 背景图片的固定：background-attachment : scroll(滚动)/ fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了); */background-attachment:fixed;/* background-attachment: scroll; */}</style>
</head>
<body><div class="box1">大家好</div><div class="box2"></div></body>
</html>

HTML——背景属性相关推荐

用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)
但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...
CSS背景属性彻底研究
☆ 背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性. body {background-color:#99FF00;} 上面的 ...
android colorstatelist_Android 样式系统 | 主题背景属性
在 Android 样式系统系列的前几篇文章中,我们介绍了主题背景与样式的区别,以及为什么说通过主题背景和公共主题背景属性来分解您要实现的内容是一个不错的主意,请点击链接回顾: Android 样式系 ...
css 背景属性 0302
背景颜色 background-color 背景图片平铺属性 background-repeat 背景图位置 background-position 背景属性的连写
（15）css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
html之CSS设计（CSS伪类、优先级、字体属性、背景属性）
文章目录一.CSS伪类二.CSS优先级三.CSS属性 1.CSS颜色设置 2.颜色属性 3.背景属性本篇文本主要介绍html编程中的CSS伪类.优先级.字体属性.背景属性,前两种是CSS选择器 ...
image是否有disabled属性_8、背景属性
背景属性常用属性属性值解释background-colorred背景颜色background-imageurl("")背景图片background-repeatrepeat;n ...
CSS常用背景属性（背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法）
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
W3school:CSS基础:CSS注释.颜色(颜色.RGB.HEX.HSL).背景(背景.背景图像.背景重复.背景附着.简写背景属性) 一.CSS注释 1.注释用于解释代码,以后在您编辑源代码时可能 ...

HTML——背景属性

HTML——背景属性相关推荐

最新文章

热门文章