CSS3背景|学习笔记

简介: 快速学习CSS3背景

发者学堂课程【HTML5 新特性学习CSS3背景】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/396/detail/5054


CSS3背景


CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。

属性:

background-size

background-origin

浏览器支持:

Internet Explorer 9+、Firefox、 Chrome、 Safari 以及 Opera 支持新的背景属性。

1、缩小图片

bodyl

background: url ("images/bg_ flower_ small.gif");

backg round-size: 50px 80px;

-moz-backg round- -size: 50px 80px;

backg round- repeat: no- repeat;

padding-top: 100px;]

]

</style>

</head>

<body>

<p>_上面时缩小的图片</p>

<p> äH:<img src=" images/bg_ flower_ small.gif" alt="t"></p>

2、位置变换

<style>

div{

border: 1px solid cadetblue;

padding: 35px;

background- image: url(images/bg_ _flower_ small.gif); backg round- repeat: no- repeat ;

background-position: Left;

#div1(

backg round-origin: bo rder-box;]

#div2f

backg round-origin: content- box;

</styLe>

: </head>

<body>

<p>border-box</p>

<div id="div1">

尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂

</div>

<p>content-box</p>

<div id="div2">

尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂尚学堂

</div>

) </body>

3、多重背景的添加

<style>

body(

background- -image: url (" images/11.gif") , url("images/bg_ _flower_ small.gif");

相关文章
|
4月前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
46 4
|
5月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
196 0
|
8天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
25天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
4月前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
4月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
42 1
|
4月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
68 1
|
5月前
|
人工智能 前端开发
CSS学习笔记2024最新
CSS学习笔记2024最新
35 1
|
5月前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
|
5月前
|
前端开发
CSS背景
【5月更文挑战第3天】CSS背景。
47 8