3.css3中多个背景图片的用法
2024-09-04 06:57:40
(background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
.class1{
width: 400px;
height: 550px;
border-style: groove;
border-color: rgba(235,198,118,0.6);
border-width: 10px;
padding: 30px; background-image: url(../image/img2.jpg),url(../image/img3.jpg),url(../image/img4.jpg);
background-repeat: no-repeat,no-repeat,repeat;/*背景图片不重复*/
background-position: top left,bottom right,top center;/*右下背景图片的位置*/
background-origin: border-box,padding-box,content-box;/*左上背景图片的定位*/
background-clip: border-box,padding-box,content-box; /*中间背景图片裁剪*/ }
p{
font-size: 20px;
text-indent: 2em;/*首行缩进2个字符*/
line-height: 28px;
padding-top: 12px;
}
</style>
</head>
<body>
<div class="class1">
<p>大家好。这是一个css3添加背景图片的小案例。需要注意的是:1.在添加多个背景的时候,底层的背景图要放在最后面。2,多个背景之间的属性用逗号分割。</p>
</div>
</body>
</html>
最新文章
- RestTemplate发送请求并携带header信息
- 20160929001 Guid生成
- Autofac - 组件
- linux source与 . 命令
- Large-Scale Named Entity Disambiguation Based on Wikipedia Data
- tomcat的几种部署方法
- AppCan中两种获取信息的方法
- Androidannotation使用之@Rest与server交互的JSON数据转换(二)
- php图片上面写文字,输出图片
- POJ3683 Falsita
- Go - 第一个 go 程序 -- helloworld
- 设计模式之迭代器模式——Java语言描述
- Shell 字符截取命令 awk
- xdoj-1243 (费马平方和问题)
- Linux下静态库和动态库
- openssl AES加密
- 组数排序非sort
- POJ 1247
- (转)Python——functools
- paypal对接