<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/mynote.ico"/>
<title>background背景</title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
/*颜色,图片,重复方式,定位*/
background: black url(../img/少女.png) no-repeat center;
/*图片大小*/
background-size: 200px;
}
#div2 {
width: 200px;
height: 200px;
margin: 200px;
padding: 200px;
border: 50px black double;
background: url(../img/樱落蝶祈.png) no-repeat left;
background-origin: padding-box;
/*background-origin背景相对位置:
* border-box背景图像边界框的相对位置;
* padding-box背景图像填充框的相对位置
* content-box背景图像的相对位置的内容框
* 注意:如果背景图像background-attachment是"固定"，这个属性没有任何效果。*/
background-size: 50px;
}
#div3 {
width: 200px;
height: 200px;
margin: 200px;
padding: 200px;
border: 50px black double;
background-color: red;
background-clip: padding-box;
/*background-clip属性指定背景绘制区域:
* border-box 默认值。背景绘制在边框方框内（剪切成边框方框）
* padding-box 背景绘制在衬距方框内（剪切成衬距方框）
* content-box 背景绘制在内容方框内（剪切成内容方框）*/
}
#div4 {
width: 100%;
height: 200px;
/*颜色,图片,重复方式,定位*/
background: url(../img/少女.png) no-repeat;
background-attachment: fixed;
/*background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
* scroll 背景图片随页面的其余部分滚动。这是默认
* fixed 背景图像是固定的
* inherit 指定background-attachment的设置应该从父元素继承
* local 背景图片随滚动元素滚动*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">background-Origin属性指定background-position属性应该是相对位置。</div>
<div id="div3">background-clip属性指定背景绘制区域</div>
<div id="div4">background-attachment设置背景图像是否固定或者随着页面的其余部分滚动</div>
<div style="height: 100px;"></div>
</body>
</html>
1577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
