Question

我正在为网站创建一个主页，我正在尝试复制部分背景img用作导航链接，以便我可以操作它。当我设计页面时，每件事情看起来都不错，但是当我在不同的屏幕上观看时，叠加层会被抛弃。

我尝试从JavaScript实现screen.width和screen.height来捕获大小并将它们作为var传递给HTML代码。然后我使用HTML top％和left / right％调整重叠导航以匹配背景img。

<script>
        //capture the screen size 

            var w =screen.width;
            var h = screen.height;
        </script>

<style>
            body {
                background:url("screen.jpg")no-repeat left top fixed;
                background-size: w h;
            }           
            #b1{
                background-size: 180px 70px;
                background: no-repeat left top fixed;
                padding: 130px 50px;
                color: white;
                text-align: center;
                background-image: url("b1.png");
                margin: 0;
                position: absolute;
                top: 55.3%;
                left: 11.5%;
                transform: translate(-50%, -50%);

有人对此有解决方法吗？它是HTML还是JavaScript问题？

Answer 1

@JohnLiebig有几件事。当您在CSS中工作时，您不应该使用HTML或JS相关的变量/方法。如果您想使用CSS变量，可以找到格式here。

以下代码段位于'background-size.'

下的MDN上

.foo {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

捕获屏幕大小并在HTML / JavaScript中创建叠加层

1 个答案: