Question

我正在努力实现一种理想的效果，其中保持剖面背景的div向一个方向倾斜。我能够使用This solution在div的顶部对角线做一个div，但我意识到还有另一个需要看到的背景，并且在主要内容之上添加div只是一行而不是div只是倾斜在顶部。

有没有办法通过Css拉出这个效果？

Answer 1

<html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

试试这个例子

或转到http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency

希望这会有所帮助

Css Diagonal Div

1 个答案: