Question

我想制作一个960 x 960px的div，带有发光角。

如何使用css正确定位此图像，使其出现在角落？

http://www.halogamertags.com/sprite_glowCorners_62_59.png

Answer 1

这是如何做到的。

div{
    position:relative;
    width:300px;
    height:200px;
}
img{
    position:absolute;
    width:100%;
    top:0;
    bottom:0;
}

更改div的高度也会影响发光图像的尺寸。还有其他方法可以实现类似的效果，但使用提供的图像就是如何完成的。

检查http://jsfiddle.net/ZRnJf/

处的工作示例

Answer 2

我将你的发光效果的1x1像素片段保存为glow.png。

我不知道你的目标究竟是什么，但是通过这段代码，我得到了角落，中间的内容。

<!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>

编辑：现在有传闻要更好地使用HTML5 doctype而不是XHTML，所以在使用XHTML之前，最好先对（dis）优势做一些研究。我认为HTML5是标准的。

div图像css的角落

2 个答案:

检查http://jsfiddle.net/ZRnJf/