Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
HTML与CSS背景图像_Html_Css - Fatal编程技术网

HTML与CSS背景图像

HTML与CSS背景图像,html,css,Html,Css,我从来没有真正使背景图像在CSS中工作过。始终在HTML中设置图像,然后对其进行格式化。但我想这次我会做对的。另外,我会在上面加上一些图片,这样问题就可以解决了 我做错了什么?此外,“溢出:隐藏”不起作用,视口看起来很奇怪。也许是背景图像的格式 似乎我不允许添加图像。因此无法添加屏幕截图 body { overflow-anchor: hidden: margin: 0px; } /* The sky defined plus the s

我从来没有真正使背景图像在CSS中工作过。始终在HTML中设置图像,然后对其进行格式化。但我想这次我会做对的。另外,我会在上面加上一些图片,这样问题就可以解决了

我做错了什么?此外,“溢出:隐藏”不起作用,视口看起来很奇怪。也许是背景图像的格式

似乎我不允许添加图像。因此无法添加屏幕截图

    body {
        overflow-anchor: hidden:
        margin: 0px;
    }

    /* The sky defined plus the sea as a box-reflection of the sky in the lake*/
    #sky {
        background: linear-gradient( rgb(1, 71, 202), #FFF);
        position: absolute;
        height: 50vh;
        width: 100vw;
        -webkit-box-reflect: below;
        -webkit-filter: grayscale(0%);
        z-index: 0;
    }

    /* The sun as a CSS radial with added blur function */
    #sun {
        background-color: white;
        top: 25vh;
        left: 33vh;
        border-radius: 50%;
        height: 50px;
        width: 50px;
        -webkit-filter: blur(1px);
        position: relative;
        z-index: 10;
    }


    /* Image of forest in png-format with a tranparency at the top of the treeline */
    #lakeline {
        background-image: url("../images/lakeline.png")
        top: calc(50vh - 75px);
        align-content: center;
        position: absolute;
        -webkit-filter: blur(0px) grayscale(0%);

        -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(white));
        z-index: 40;  
      }

我不是100%确定你想在这里实现什么,但是如果你正在寻找一个容器背景图像,这应该对你有帮助

“背景大小”属性提供了一些其他对齐选项

编辑: 在这里添加了分层图像背景

.背景{ 背景:002a43urlhttps://s3.amazonaws.com/libapps/accounts/27060/images/example.png 左上角不重复; 背景尺寸:封面; } .背景倍数{ 背景图像:urlhttps://s3.amazonaws.com/libapps/accounts/27060/images/example.png, urlhttps://img03.deviantart.net/c90e/i/2012/222/2/7/mountain_stock_1_by_solanaceae85-d5alag2.jpg; 背景位置:右上、右上; 背景重复:不重复,不重复; 背景尺寸:150px,450px; } 这里只有一张图片 这里只有一张图片 这里只有一张图片 这里只有一张图片 编辑: 这里有多个图像 这里有多个图像 这里有多个图像 这里有多个图像
你的HTML代码在哪里?嗨,谢谢。看起来像是普通背景?我的目标是让不同层次的图像相互融合。我正在尝试将它们添加到CSS中。不是HTML。顺便说一句,我刚刚意识到我在css代码中遗漏了背景图像标签。添加了一个多图像选项,我想这就是你要找的。根据你计划如何处理这些,你可能会考虑使用单独的绝对定位标签,这将给你更多的造型灵活性和JavaScript控件。嗨,非常感谢。我把网页上传到了一个网络服务器上。它在:它的25%完成。森林线+太阳分为不同的层,相互重叠。我会再加上几层景观的东西。计划是将数值随机化,以获得不同的情绪。我确实先试过容器,但有点不起作用。但也许它做得不好。如果您有任何其他策略使其工作/thx,请告诉我