CSS学习(九)-CSS背景
2024-09-28 04:09:05
一、理论:
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>
最新文章
- SELinux查看、启用、关闭
- Behavior Tree
- html5 Canvas绘制图形入门详解
- Centos6 使用yum安装 mysql 5.7
- automapper初步
- Objective-C的内存管理
- SVN与TortoiseSVN实战:标签与分支
- Git安装与上传代码至Github
- macOS上的ODBC-利用unixODBC连接PostgreSQL与SQLite并进行数据迁移
- gRPC源码分析(c++)
- python常见问题汇总
- Linux-centos7超过2TB使用parted命令分区
- iOS原生实现二维码拉近放大
- python开发之虚拟环境管理:virtualenv、virtualenvwrapper、pycharm
- 使用jQuery+huandlebars遍历中if判断
- NopCommerce源码架构
- 设计模式之Flyweight(享元)(转)
- kali更新失败
- 简单了解 iTextSharp实现HTML to PDF
- django.db.utils.OperationalError: 1045错误
热门文章
- CrudRepository.findOne报错
- 【剑指offer】面试题 29. 顺时针打印矩阵
- JZYZOJ1537 [haoi2014]贴海报
- BZOJ 1430 小猴打架(prufer编码)
- 【数论】【Polya定理】poj1286 Necklace of Beads
- bzoj 4430: [Nwerc2015]Guessing Camels赌骆驼
- Java高级架构师(一)第37节:反向代理和动静分离的实现
- opensuse个人初始化
- Do waiting or suspended tasks tie up a worker thread?
- java比较客户端版本号