Question

我不知道这是不是很棘手。

这是jsFiddle简单<div>hello</div>：

有没有简单的方法可以用红色为该div的左上角像素着色？

谢谢。

Answer 1

你可以这样做：

div:before{
    position: absolute;
    width:1px;height:1px;
    background:red;
    content:'';
}
div {
    position: relative;
    border:1px solid green;
    height:200px;
    background-color:yellow;
}

Demonstration（有一个更大的红点，这很明显）

Answer 2

你应该可以使用：

first-pixel-color-top-left-color: #f00;

Answer 3

对于浏览器兼容性，您可以在div中添加范围：

<div><span></span>hello</div>

然后添加样式：

div {
    border:1px solid green;
    height:200px;
    background-color:yellow;
    position:relative;
}

div span {
    position:absolute;
    height:1px;
    width:1px;
    background:red;
    top:0;
    left:0;
}

Answer 4

通过这种方式：

div {
    position: relative;
    border:1px solid green;
    height:200px;
    background-color:yellow;
}

div span {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 1px;
    background: red;
}

http://jsfiddle.net/m3GMc/1/

或通过图片。

为div中的像素着色

4 个答案: