HTML背景图片透明度设置

最新推荐文章于 2024-12-02 17:12:41 发布

原创最新推荐文章于 2024-12-02 17:12:41 发布 · 4w 阅读

22 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

140 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的电影主题网页布局案例，页面包括背景图片和视频播放区域。

<!DOCTYPE html>
<html>
<head>
    {% csrf_token %}
    {% load staticfiles %}
    {% load bootstrap3 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}
    <title>movie</title>
    <style type="text/css">
        .bodystyle{
        filter:alpha(opacity=20);
        -moz-opacity:0.2;
        -khtml-opacity: 0.2;
        opacity: 0.4;
        height:100%;
        width:100%;
        position:absolute;
        }
        body{text-align:center}
        h1{text-align:center;}
    </style>
</head>
<body>
    <div class="bodystyle">

    <img src="{% static "images/3.jpg" %}" width=100% height=100%></div>

    <div style="position:absolute;">

     <h1>The movie space</h1>
    <div >
        <video src="/static/movie/movie.ogg" width="720px" height="540px" controls="controls">
        Your browser does not support the video tag.
        </video>
    </div>

    </div>

</body>
</html>