Question

我想实现这个目标：屏幕两侧有两个装饰元素（一种波浪）。这是我到目前为止所得到的。如果可以使用更优雅的解决方案（比如仅使用CSS样式的主体元素），那么请指教。如果两个＆lt; img＆gt;元素不可见。你可以检查一下这个。

这是工作FIDDLE。

你能帮忙吗？

<!doctype html>
<html class="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="styles/style.css" >
    <style type="text/css">
        .background_left {
            background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
            background-repeat:repeat-y;
            background-position:left;
            position:absolute;
            left:0;
        }

        .background_right {
            background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
            background-repeat:repeat-y;
            background-position:right;
            position:absolute;
            right:0;
        }
        .background_left, .background_right {
            height:100%;
        }

    </style>

</head>

<body>
    <div class="background_left">
        <img src="http://www.destadesign.com/destacms/images/background_border_left.png"> 
    </div> 
    <div class="background_right">
        <img src="http://www.destadesign.com/destacms/images/background_border_right.png">
    </div> 

    <div class="content" style="height:500px;"> <!-- content -->
    </div>
</body>
</html>

屏幕两侧的CSS背景元素

0 个答案: