CSS入门 0x1 背景图像、圆角
背景图像基础
默认，浏览器水平和垂直地重复显示背景图像。
body {
background-image: url(http://img.pconline.com.cn/images/photoblog/8/9/6/0/8960500/20096/12/1244801595823_mthumb.jpg);
}水平平铺
body {
background-image: url(http://img.pconline.com.cn/images/photoblog/8/9/6/0/8960500/20096/12/1244801595823_mthumb.jpg);
background-repeat: repeat-x;
}作为单独显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image</title>
<style>
#branding {
width: 956px;
height: 521px;
background-image: url(./images/logo02.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="branding"></div>
</body>
</html>在标题应用背景图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image</title>
<style>
h1 {
padding-left: 30px;
background-image: url(./images/buble.png);
background-repeat: no-repeat;
background-position: left center;
}
</style>
</head>
<body>
<h1>My Heading</h1>
</body>
</html>背景图像定位方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image</title>
<style>
#px {
background-position: 20px 16px;/*图片左上角相对于元素20px,16px*/
}
#percent {
background-position: 25% 25%;/*图片25%,25%处的点相对于元素25%，25%*/
}
div {
padding-left: 35px;
width: 80px;
height: 150px;
background-image: url(./images/folder.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="px">像素定位</div>
<div id="percent">百分比定位</div>
</body>
</html>圆角框
固定宽度的圆角框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image</title>
<style>
.box {
width: 424px;
background: url(./images/tile2.gif) repeat-y;
}
.box h2 {
background: url(./images/top2.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(./images/bottom2.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2,.box p {
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>I have a dream!</h2>
<p class="last">I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.</p>
</div>
</body>
</html>灵活的圆角框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image</title>
<style>
.box {
width: 20em;
background: #effce7 url(./images/bottom-left.gif) no-repeat left bottom;
}
.box-outer {
background: url(./images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 1em;
}
.box-inner {
background: url(./images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(./images/top-right.gif) no-repeat right top;
padding-bottom: 1em;
}
.box h2,.box p {
padding-left: 1em;
padding-right: 1em;
}
</style>
</head>
<body>
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>I have a dream!</h2>
<p>
I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.
</p>
</div>
</div>
</div>
</body>
</html>山顶角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image</title>
<style>
/*利用蒙版实现角色切换*/
.box {
width: 20em;
background: #effce7 url(./images/bottom-left.gif) no-repeat left bottom;
}
.box-outer {
background: url(./images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%；
}
.box-inner {
background: url(./images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(./images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2,.box p {
padding-left: 5%;
padding-right: 5%;
}
</style>
</head>
<body>
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>I have a dream!</h2>
<p class="last">I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.</p>
</div>
</div>
</div>
</body>
</html>