div corners from an image css
I want to make a div that is 960 x 960px with the glow corners.
How do you position this image correctly using css so it appears in 开发者_Go百科the corners?
http://www.halogamertags.com/sprite_glowCorners_62_59.png
This is how it can be done.
div{
position:relative;
width:300px;
height:200px;
}
img{
position:absolute;
width:100%;
top:0;
bottom:0;
}
Changing the height of the div will also affect the dimensions of the glow image. There are other ways of accomplishing a similar effect, but using the image provided this is how it can be done.
Check working example at http://jsfiddle.net/ZRnJf/
I saved an 1x1 px slice of your glow effect as glow.png.
I do not know what exactly your goal is, but with this code I get the corners, and the content in the middle.
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta name="page-topic" content="CSS, HTML, Tutorialo" />
<meta name="robots" content="index,follow" />
<meta name="distribution" content="global" />
<meta name="keywords" content="Keywords, here" />
<meta name="description" content="A good listing to vote up" />
<title>CSS - DEMO</title>
</head>
<body style="background-color: gray;">
<div style="background-image: url('glow.png'); background-repeat: repeat-x; background-position: top; width: 960px; height:960px; margin: 15px;">
<div style="background-image: url('glow.png'); background-repeat: repeat-x; background-position: bottom; width: 960px; height:960px; ">
<div style="background-image: url('glow.png'); background-repeat: repeat-y; background-position: left; width: 960px; height:960px; " >
<div style="background-image: url('glow.png'); background-repeat: repeat-y; background-position: right; width: 960px; height:960px; ">
<div style="margin: 1px;">
Hello World
</div>
</div></div></div></div>
</body>
</html>
EDIT: Nowadays there are rumors going on for better using HTML5 doctype rather than XHTML, so before just using XHTML better do some research on the (dis)advantages. I think HTML5 is standard.
加载中,请稍侯......
精彩评论