Question

我想屏蔽一个div以显示我的图像偏斜。但我不希望图像倾斜。

现在掩码中存在间隙，图像无法填充所有掩码。

.mask{
 background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
    height:200px;
       -webkit-transform: skew(-16deg);
    -moz-transform: skew(16deg);
    -o-transform: skew(16deg);
    transform: skew(16deg);
}

有什么建议吗？感谢

Answer 1

您需要更改.mask课程的CSS。

.wrapper{
    display: block;
    height:200px;
    background: #f8f8f8 none repeat scroll 0 0;
    text-align: left;
    -webkit-transform: skew(-16deg);
    -moz-transform: skew(-16deg);
    -o-transform: skew(-16deg);
    transform: skew(-16deg);
    border-right:medium none;
    margin-bottom: 26px;
    margin-left: 44px;
    overflow: hidden;
    z-index: 100;
    width:300px;
    
} 
.mask {
    background-image: url("http://www.birds.com/wp-content/uploads/home/bird4.jpg");
    background-position: center top;
    height: 480px;
    transform: skew(16deg);
    width: 430px;
    padding-left: 70px;
}

<div class="wrapper">
    <div class="mask">asdassadd</div>
</div>

Answer 2

只需将图像添加到另一个div中，然后用相反的方法对其进行反键。最难的是现在定位你的div，这需要一些调整 - 取决于你的内部div需要更大的角度。我也将它定位在包装div的中心。

.mask {
    position: relative;
    left: 100px;
    width: 200px;
    height:200px;
    overflow: hidden;
    -webkit-transform: skew(-16deg);
       -moz-transform: skew(-16deg);
        -ms-transform: skew(-16deg);
            transform: skew(-16deg);
}  
.mask > * {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 370px;
    height:370px;
    color: #fff;
    background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
    -webkit-transform: skew(16deg) translate(-50%,-50%);
       -moz-transform: skew(16deg) translate(-50%,-50%);
        -ms-transform: skew(16deg) translate(-50%,-50%);
            transform: skew(16deg) translate(-50%,-50%);
}

<div class="mask"><div>This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.</div></div>

用css掩盖一个div

2 个答案: