Question

有没有办法将文字放在一个已经背景图像偏斜的div上？下面是我试图实现的一个例子，但因为我使用:: before伪元素，文本出现在图像后面。

HTML

<div class="diag-right">Text Here</div>

CSS

.diag-right {
    height:220px;
    float:right;
    width:260px;
    position: relative;
    overflow: hidden;
    outline: 1px solid transparent;
    left: -120px;
    transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -webkit-transform: skew(-20deg);
    -ms-transform: skew(-20deg); 
    -sand-transform: skew(-20deg);
}

.diag-right::before {
    content: "";
    position: absolute;
    width: 370px;
    height: 100%;
    top: 0;
    left: -40px;
    background: url("http://imgur.com/T25mFEV.jpg") 0 0 repeat;
    transform: skew(20deg); 
    -o-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -webkit-transform: skew(20deg);
    -ms-transform: skew(20deg); 
    -sand-transform: skew(20deg);
}

直播示例

http://jsfiddle.net/jGJe3/

有没有办法做到这一点或合适的工作？

Answer 1

您可以使用

.diag-right::before {
  z-index: -1;
}

将::before置于.diag-right元素后面。请注意，当.diag-right具有自己的背景时，此解决方案无法使用，因为那时它将位于::before之上。

Answer 2

那里你真的不需要::before元素。

检查此 Fiddle Demo

<强> CSS

.diag-right {
        color:white;
        height:220px;
        float:right;
        width:260px;
        position: relative;
        overflow: hidden;
        outline: 1px solid transparent;
        left: -120px;
        transform: skew(-20deg); 
        -o-transform: skew(-20deg); 
        -moz-transform: skew(-20deg); 
        -webkit-transform: skew(-20deg);
        -ms-transform: skew(-20deg); 
        -sand-transform: skew(-20deg);
        background: url("http://imgur.com/T25mFEV.jpg") 0 0 repeat;
    }

Answer 3

HTML：

<div class="diag-right">Text Here
    <div class="content">
        I think this will help u .
    </div>
</div>

CSS：

.diag-right {
        height:220px;
    float:right;
    width:260px;
    position: relative;
    overflow: hidden;
    outline: 1px solid transparent;
    left: -120px;
        transform: skew(-20deg); 
        -o-transform: skew(-20deg); 
        -moz-transform: skew(-20deg); 
        -webkit-transform: skew(-20deg);
        -ms-transform: skew(-20deg); 
        -sand-transform: skew(-20deg);
    }

    .diag-right::before {
        position: absolute;
        width: 370px;
        height: 100%;
        top: 0;
        left: -40px;
        background: url("http://imgur.com/T25mFEV.jpg") 0 0 repeat;
        transform: skew(20deg); 
        -o-transform: skew(20deg); 
        -moz-transform: skew(20deg); 
        -webkit-transform: skew(20deg);
        -ms-transform: skew(20deg); 
        -sand-transform: skew(20deg);
    }
.content {
    opacity: 0.6;
    height : 100px;
    width: 150px;
    color: #fff;
}

在倾斜的div的文本与背景图象

3 个答案: