CSS学习(九)-CSS背景
2023-09-11 14:14:09 时间
一、理论:
1.background-break
a.bounding-box 背景图像在整个内联元素中进行平铺
b.each-box 背景图像在行内中进行平铺
c.continuous 下一行的背景图像紧接着上一行中的图像继续平铺
以上仅在firefox下可用
2.css多背景
a.background-image 设置元素背景图片民,可用相对地址或绝对地址索引背景图像
b.background-repeat 设置元素背景图像的平铺方式 默认repeat
c.background-size 设置元素背景图像的尺寸大小 默认auto
d.background-attachment 设置元素的背景图片是否固定 默认scroll
e.background-clip 控制元素背景图像显示区域大小,默认border-box
f.background-color 设置元素背景颜色
g.多个属性中间必须用","分开
h.最先声明的背景图片将会居于最上层,最后指定的图片放于最底层
1.background-break
a.bounding-box 背景图像在整个内联元素中进行平铺
b.each-box 背景图像在行内中进行平铺
c.continuous 下一行的背景图像紧接着上一行中的图像继续平铺
以上仅在firefox下可用
2.css多背景
a.background-image 设置元素背景图片民,可用相对地址或绝对地址索引背景图像
b.background-repeat 设置元素背景图像的平铺方式 默认repeat
c.background-size 设置元素背景图像的尺寸大小 默认auto
d.background-attachment 设置元素的背景图片是否固定 默认scroll
e.background-clip 控制元素背景图像显示区域大小,默认border-box
f.background-color 设置元素背景颜色
g.多个属性中间必须用","分开
h.最先声明的背景图片将会居于最上层,最后指定的图片放于最底层
二、实践:
1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ background: #000 url(images/2-11-test.jpg) center center fixed no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } @media only all and (max-width:1024px) and (max-height: 768px){ body{ -moz-background-size: 1024px 768px; -webkit-background-size: 1024px 768px; -o-background-size: 1024px 768px; background-size: 1024px 768px; } } @media only all and (max-width:640px) and (max-height: 480px){ body{ -moz-background-size: 640px 480px; -webkit-background-size: 640px 480px; -o-background-size: 640px 480px; background-size: 640px 480px; } } </style> </head> <body> <div></div> <div class="div1" ></div> <div class="div2" ></div> <div class="div3" ></div> <div class="div4" ></div> </body> </html>2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .demo{ width: 500px; height: 300px; border:20px solid rgba(104,105,168,0.5); border-radius: 10px; padding: 80px 60px; color:#123589; font-size: 25px; line-height: 1.5; text-align: center; } .multipleBg{ background: url("images/round-box1.jpg") no-repeat left top, url("images/round-box-2.jpg") no-repeat right top, url("images/border-radius.jpg") no-repeat left bottom, url("images/tabs-image.jpg") no-repeat right bottom, url("images/border.jpg") no-repeat right bottom; -webkit-background-origin: border-box,border-box,border-box,border-box,padding-box; -moz-background-origin: border-box,border-box,border-box,border-box,padding-box; -o-background-origin: border-box,border-box,border-box,border-box,padding-box; background-origin: border-box,border-box,border-box,border-box,padding-box; -moz-background-clip: border-box; -webkit-background-clip: border-box; -o-background-clip:border-box; background-clip: border-box; } </style> </head> <body> <div class="demo multipleBg">用五张背景图片做出这种效果</div> </body> </html>
相关文章
- 【Cssflex】css中关于弹性布局flex的综合用法(示例展示)
- 美团面试——机器学习岗
- [转]oracle学习入门系列之五内存结构、数据库结构、进程
- Vue3学习之深度剖析CSS Modules和Scope
- 【前端学习之HTML&CSS进阶篇】-- HTML第五篇 -- 表单练习(Bilibili注册界面模仿)
- 【前端学习之HTML&CSS】-- CSS第五篇 -- 盒模型及其应用
- 【前端学习之HTML&CSS】-- CSS第四篇 -- 层叠、继承与属性值计算
- 【前端学习之HTML&CSS】-- CSS第三篇 -- 选择器(下)
- 【前端学习之HTML&CSS】-- HTML第七篇 -- 图片元素与多媒体元素
- PHP全栈学习笔记18
- 教你如何在机器学习竞赛中更胜一筹
- Dynamic CRM 2013学习笔记(十八)根据主表状态用JS控制子表自定义按钮
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- css学习之---浮动父级塌陷的解决办法
- gmock学习01---Linux配置gmock
- NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题及VUE提取 CSS 到单个文件
- ansible debug模块学习笔记
- 学习游戏要学习编程语言吗?十大主流编程语言解析
- 深度学习激活函数比较
- 开始学习 IOS 开发,学习环境搭建
- STM32-USB学习系列(二):USB的枚举过程与描述符相关内容
- CSS 加粗(css font-weight)
- CSS 加粗(css font-weight)
- 汇编语言学习汇总
- vagrant的学习 之 打包分发