个人中心
gpt4 book ai didi

html - 如何使对象相对于背景而不是浏览器窗口移动？

转载 作者：太空宇宙 更新时间：2023-11-04 05:13:10 25 4
gpt4 key购买 nike

我尝试使用 CSS 将背景和对象的位置设置为所有可能的类型(固定、相对、绝对)。我还调整了背景图像的宽度，最小宽度。

The Test Page

CSS:

  • 背景:
    /* BG Image Style */
    .bg {
     position: relative;
     width: 100%;
     height: 100%
     }
  • 播放器
    /* Player Style */
    #player {
     position: absolute;
     width: 680px;
     top: 60px;
     left: 380px;
     border: outset 5px white;
     }
  • 菜单
    /* Nav Menu */
    ul#menu {
     position: absolute;
     top: 175px; 
     left: 68px;
     padding: 0; 
     list-style: none;
     clear: both;     
     }

    • HTML: 
    <html>
    <head>
    <title>BKK Testing Zone</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png"/>

    <div id="player">
    <script type='text/javascript' src='http://thebkk.net/Scripts/jwplayer/jwplayer.js'>      
    </script> 

    <div id='mediaspace'></div>

    <script type='text/javascript'>
     jwplayer('mediaspace').setup({
      'flashplayer': 'http://thebkk.net/Scripts/jwplayer/player.swf',
      'playlistfile': 'http://www.thebkk.net/test/playlist.xml',
      'backcolor': '000000',
      'frontcolor': '00FFFF',
      'lightcolor': '33FF33',
      'playlist': 'right',
      'controlbar': 'bottom',
      'width': '680',
      'height': '360',
      });
    </script>
    </div>

    <ul id="menu">
    <li class="home"><a href="http://thebkk.net"></a></li>
    <li class="rules"><a href=""></a></li>
    <li class="forums"><a href="http://forum.thebkk.net"></a></li>
    <li class="links"><a href="" alt="Links"></a></li>
    </ul>

    </body>
    </html>

    谢谢!我四处寻找，有些部分是我想做的，但似乎找不到我想要的东西。

    最佳答案

    您可能想阅读“响应式 Web”。那里有很多关于制作流体网格的想法，这些想法可能对你正在做的事情有所帮助。

    无论如何，我不知道你是否会得到你想要做的事情来完美地与 CSS 一起工作。您可能还必须使用一些 JavaScript。

    我会重新开始并尝试为基本的 HTML 做这样的事情:

    <body>
        <div class="container">

            <div class="media"></div>

            <div class="menu"></div>

            <img src="background.png" />
        </div>
    </body>

    我会把东西放在一个容器 div 中，只是因为我不喜欢直接使用 CSS 的 body 元素。它是一个更独立的模块。

    至于 CSS，你会让你的背景图像像你一样。

    然后，您的菜单将需要将图像放入带有 IMG 标记的列表项 (LI) 中。那些 IMG 将需要一个 width:100% 样式。

    现在，您正在使用菜单图像作为背景，这不会很好地流动，所以就像您对主背景图像所做的那样，您需要对菜单进行处理。

    然后，您需要将菜单容器宽度设置为较大容器(即背景图像)的 %。

    要获得此百分比，您需要将您希望菜单适合的区域的宽度除以容器的总宽度。

    您的背景图片看起来像 1280 像素。 “窗口”的总宽度为 214px。

    这意味着菜单的宽度应该是:

    214 像素/1280 像素 = 0.1671875 * 100% = 16.71875%

    然后，您需要使用与使用时相同的 CSS 正确放置菜单容器，但使用 % 而不是像素，因为这将允许定位随浏览器大小移动。

    该背景“窗口”的左上角看起来像是从左侧开始 20 像素，从顶部向下 263 像素。

    20 像素/1280 像素 = 0.015625 * 100% = 1.5625% 
    left: 1.5625%

    263 像素/960 像素 = 0.27395833333333333 * 100% = 27.39583333333% 
    top: 27.39583333333%;

    现在，菜单容器应该具有与背景图像(这是您试图将菜单对齐的内容)成比例的宽度，这意味着它应该与背景图像展开或收缩。

    记住菜单 HTML 必须是这样的: 
    <ul>
        <li><img src="..." alt="" /></li>
        [...]
    </ul>

    使用 CSS: 
    #menu li img{ 
        width:100%; 
    }

    我不确定这是否可行，但它可能会让你朝着正确的方向前进。无论如何，我不认为这是非常好的结果。

    在这种情况下，您最好制作一个完整的 Flash 网站(尽管我不喜欢使用 Flash)。

    我希望这会有所帮助!

    干杯!

    - 更新 -

    我整理了一些概念验证。我只在 Chrome 和最新的 FF 中测试过。正如我所料，你可以让它工作，但你会遇到支持问题。

    无论如何，这是我用基本上 2 个目标区域(框)制作的背景图像。它与原版相似。

    背景图像(1000x750。我从 1024x768 或 iPad 尺寸开始，并将其设置为 1000px 宽以便于百分比)

    http://tinypic.com/r/11r9edw/5

    菜单图片 1

    http://tinypic.com/r/2s7ucmg/5

    菜单图片 4(为简洁起见，我将跳过上传所有菜单图片)

    http://tinypic.com/r/2nlv42x/5

    CSS(百分比很草率，但这只是一个概念验证) 
    body{
        margin:0;
        padding:0;  
    }
    .container{
        position: relative;
        width: 100%;
        height: 100%;
        background-color:#F0F; 
    }
    .bg-img{
        display:block;
        position: relative;
        width: 100%;
        height: 100%;
        z-index:1; 
    }
    .menu{
        position:absolute; 
        width:15%; 
        height:33%;
        top:33%; 
        left:10%; 
        border:1px dashed red; 
        z-index:10; 
    }
    .menu ul{
        height:100%;
        margin:0;
        padding:0;
    }
    .menu li img{ 
        width:100%; 
        height:100%;
        margin:0;
        padding:0;
    }
    .menu li{ 
        position:relative; 
        height:24.5%;
    }

    .media{
        position:absolute; 
        width:43%; 
        height:15%; 
        top:16%; 
        left:31%; 
        background:#9CC;
        z-index:10; 
    }

    的HTML 
    <div class="container">
        <img class="bg-img" src="bg.png" alt="" />

        <div class="menu">
            <ul>
            <li><a href="#"><img src="menu1.png" alt="Menu 1" /></a></li>
            <li><a href="#"><img src="menu1.png" alt="Menu 2" /></a></li>
            <li><a href="#"><img src="menu4.png" alt="Menu 3" /></a></li>
            <li><a href="#"><img src="menu4.png" alt="Menu 4" /></a></li>
            </ul>
        </div>

        <div class="media"></div>

    </div>

    我或多或少只是使用 position:absolute 将所有内容“ float ”为背景图像的比率/百分比，它被拉伸(stretch)到浏览器的 100% 宽度/高度。

    定义的高度/宽度是必要的(并将边距/填充设置为零以重置浏览器默认值)。

    Chrome 似乎运行良好。 FF 似乎对 height:100% 有问题。有可能它可以被清理更多，但这应该是你想要用 CSS 做的事情的开始。

    但是就像我说的，这种事情在 CSS 中并没有很好的处理，即使使用 CSS3 这种设计也会给向后兼容性带来很多麻烦。

    HTML 5 就在这里，它也不会是 Elixir 。这种设计理念非常基于矢量，而 Flash 非常适合这种东西。

    希望这可以帮助! =)

    关于html - 如何使对象相对于背景而不是浏览器窗口移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8809864/

    25 4 0
    文章推荐： html - doctype html 中薄图像的框模型问题？
    文章推荐： linux - 使用 ForkManager 在 Linux 上运行 Perl 脚本
    文章推荐： linux - 是否可以在Linux服务器的终端中打开X11应用程序？
    文章推荐： python - Google Dataflow python 快速启动错误 - GcsIO 没有属性
    太空宇宙
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com