CSS3背景图片新样式
详细如代码内所示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS背景属性控制</title>
<style>
.box1{
width: 1000px;
height: 800px;
border: 5px dashed black;
/*设置背景图片*/
background-image: url("https://img01.sogoucdn.com/app/a/100520024/75b814f33990d566842a2a1ba8952ede");
/*设置背景图片不重复*/
background-repeat: no-repeat;
/*背景图片定位*/
background-position: left bottom;
/*background-position: 20% 30%;*/
/*background-position: 50px 50px;*/
/*背景固定定位*/
background-attachment: fixed;
/*简写*/
/*background-image: 背景颜色 url(图片地址) 不重复:no-repeat x轴居左left y垂直居中center 固定背景图片fixed;*/
}
/*CSS3关于背景的新样式*/
.box2{
width: 350px;
height: 280px;
border: 10px dashed red;
margin-left: 0px;
background: url("http://pic.sogou.com/detail_2015_b/images/logo.png") no-repeat left bottom,
url("http://www.php.cn/static/images/user_avatar.jpg") no-repeat right top;
background-color: cadetblue;
/*渲染默认值*/
background-clip: border-box;
/*从padding开始*/
background-clip: padding-box;
/*从内容渲染*/
background-clip: content-box;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例