HTML/CSS/Box Model/Background
Содержание
Add background image to LI
<source lang="html4strict">
<!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>
- V
- S
- T
- P
</body> </html>
</source>
background assigns the padding area inside the box to a background color and/or image.
<source lang="html4strict">
<!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>
Box Model
</body> </html>
</source>
background: lightblue
<source lang="html4strict">
<!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>
</body>
</html>
</source>
background: lightgreen
<source lang="html4strict">
<!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>
</body>
</html>
</source>
background: pink
<source lang="html4strict">
<!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>
</body>
</html>
</source>
background: rgb( 128)
<source lang="html4strict">
<!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>
This is a heading
This is a paragraph of text.
</body>
</html>
</source>
Background with no repeat
<source lang="html4strict">
<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>
Background Image
</body> </html>
</source>
Css Rollover with image
<source lang="html4strict">
<!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>
</body> </html>
</source>
Set URL for Background Image
<source lang="html4strict">
<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>
Background Image
</body> </html>
</source>