div corners from an image css_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-18 21:09 出处：网络

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?

相关专题：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.