1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_15 css背景属性

背景属性:

background-color 背景颜色

background-image 背景图片

背景重复:

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

背景位置:background-position:

position: x y:

? 像素:100px 100px

? 百分比:10% 20%: (容器宽度-图片宽度)*10%

? left center right, top center bottom;

? -100px,0px

background-attachment: 背景跟随内容滚动或者固定

background-attachment:fixed;

background-attachment:scroll;

复合写法:

background: url("./img/2.jpg") center top no-repeat scroll;

.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景2</title>
 6     <link rel="stylesheet" href="./bg2.css">
 7 </head>
 8 <body style="height: 2000px;">
 9     <p>0</p>
10     <p>1</p>
11 </body>
12 </html>

.css

body {
background: #fff url("http://real2.s-angels.com/images/sample/m254_misa/thumb/model_top.jpg") center top no-repeat fixed;
}

原文地址:https://www.cnblogs.com/denggelin/p/8995022.html

时间: 2024-10-10 08:13:42

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_15 css背景属性的相关文章

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_8 css 3种样式引用方法&lt;link&gt;&lt;style&gt;

0.行内样式添加CSS <p style="color: red;">这是一个段落</p> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css</title> 6 </head> 7 <body> 8 <p&

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_20 css样式作业

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css样式作业</title> 6 <style> 7 * { 8 font-family: "微软雅黑" 9 } 10 body { 11 background: url("http://rea

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_21 css定位作业

CSS3 border-radius 属性 定义和用法 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许您为元素添加圆角边框! 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 &

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_12 css边框

复合写法: border: 2px solid red; 分开写法: border-color: red; border-bottom-color: blue; border-bottom-style: dotted; border-bottom-width: 5px; border-left-color: yellow; border-left-style: solid; border-left-width: 6px; border-right-color: green; border-rig

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_11 css字体样式

复合写法: font: italic bold 20px "微软雅黑" 分开写法: font-family: "微软雅黑"; font-size: 20px; font-size: 2em; 1em=16px font-style: italic; font-style: normal; font-weight: bold; font-weight: normal; 原文地址:https://www.cnblogs.com/denggelin/p/8994214.h

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_13 css列表&amp;文本样式

HTML <ul> 标签 定义和用法 <ul> 标签定义无序列 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表</title> 6 <style> 7 li { 8 list-style-type: none; 9 text-decoratio

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_18 盒模型[浮动计算]

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动</title> 6 <style> 7 ul,li { 8 list-style-type: none; 9 margin: 0px; 10 padding: 0px; 11 } 12 li { 13 float:

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_3 表格标签&lt;table&gt;

HTML <table> 标签 定义和用法 <table> 标签定义 HTML 表格. 简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. 更复杂的 HTML 表格也可能包括 caption.col.colgroup.thead.tfoot 以及 tbody 元素. 1 <!DOCTYPE html> 2 <html lang="en"&

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_2 html列表的用法

0.无序列表 1.有序列表 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <!--这是一个注释--> 9 <!--无序列表--> 10 <ul> 1