HTML/CSS/Box Model/Background
Содержание
Add background image to LI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul {
background: url(list-bkgd.gif) bottom;
width: 298px;
list-style: none;
padding: 0 0 12px;
margin: 0;
}
li {
color: #eee;
font-family: Verdana, Arial, Verdana, sans-serif;
padding: 7px 7px 7px 20px;
border-bottom: 1px solid #888;
background: url(list-marker.gif) no-repeat 5px .8em;
}
</style>
</head>
<body>
<ul>
<li>V</li>
<li>S</li>
<li>T</li>
<li>P</li>
</ul>
</body>
</html>
background assigns the padding area inside the box to a background color and/or image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .box {
display: static;
overflow: visible;
visibility: visible;
width: 160px;
height: 150px;
padding: 30px;
border-top: 30px solid gray;
border-bottom: 30px solid black;
border-left: 30px solid gray;
border-right: 30px solid black;
margin-left: 230px;
margin-top: 80px;
background-color: #ccc;
}
</style>
</head>
<body>
<h1>Box Model</h1>
<div class="box"></div>
</body>
</html>
background: lightblue
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
position: absolute;
padding: 10px;
border: 1px solid black;
opacity: 0.9;
background: #ccc;
width: 100px;
height: 100px;
top: 20px;
left: 20px;
z-index: 4;
}
div + div {
background: lightblue;
top: 40px;
left: 40px;
z-index: 3;
}
div + div + div {
background: lightgreen;
top: 60px;
left: 60px;
z-index: 2;
}
div + div + div + div {
background: pink;
top: 80px;
left: 80px;
z-index: 1;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</body>
</html>
background: lightgreen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
position: absolute;
padding: 10px;
border: 1px solid black;
opacity: 0.9;
background: #ccc;
width: 100px;
height: 100px;
top: 20px;
left: 20px;
z-index: 4;
}
div + div {
background: lightblue;
top: 40px;
left: 40px;
z-index: 3;
}
div + div + div {
background: lightgreen;
top: 60px;
left: 60px;
z-index: 2;
}
div + div + div + div {
background: pink;
top: 80px;
left: 80px;
z-index: 1;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</body>
</html>
background: pink
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
position: absolute;
padding: 10px;
border: 1px solid black;
opacity: 0.9;
background: #ccc;
width: 100px;
height: 100px;
top: 20px;
left: 20px;
z-index: 4;
}
div + div {
background: lightblue;
top: 40px;
left: 40px;
z-index: 3;
}
div + div + div {
background: lightgreen;
top: 60px;
left: 60px;
z-index: 2;
}
div + div + div + div {
background: pink;
top: 80px;
left: 80px;
z-index: 1;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</body>
</html>
background: rgb( 128)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> exercise 4-2 </title>
<style type="text/css" media="all">
body {
font-size: 12px;
}
h1 {
font-size: 25px;
background: rgb(255, 192, 203);
padding: 25px;
border: thin solid rgb(0, 0, 0);
}
p {
font-size: 11px;
padding: 11px;
border: thin solid rgb(0, 0, 0);
background: rgb(128, 128, 128);
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1>
This is a heading
</h1>
<p>
This is a paragraph of text.
</p>
</body>
</html>
Background with no repeat
<html>
<head>
<title>Background with no repeat</title>
<style type="text/css">
div { background:url("heading2.jpg") no-repeat; width:250px; height:76px; }
</style>
</head>
<body>
<h1>Background Image</h1>
<div></div>
</body>
</html>
Css Rollover with image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
text-align:center;
}
#nav{
width:600px;
margin-left:auto;
margin-right:auto;
}
#nav ul, #nav li {
margin:0;
padding:0;
list-style:none;
}
li{
float:left;
width:100px;
height:22px;
line-height:22px;
background:url(images/roll-up.jpg) no-repeat left top;
}
#nav a{
display:block;
width:100px;
height:22px;
background:url(images/roll-down.jpg) no-repeat left top;
text-decoration:none;
font-size:x-small;
}
#nav a:hover{background:transparent;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Testing 1</a></li>
<li><a href="#">Testing 2</a></li>
<li><a href="#">Testing 3</a></li>
<li><a href="#">Testing 4</a></li>
<li><a href="#">Testing 5</a></li>
<li><a href="#">Testing 6</a></li>
</ul>
</div>
</body>
</html>
Set URL for Background Image
<html>
<head>
<title>Set URL for Background Image </title>
<style type="text/css">
div { background:url("heading2.jpg") no-repeat; width:250px; height:76px; }
</style>
</head>
<body>
<h1>Background Image</h1>
<div></div>
</body>
</html>