1. 首页
  2. 问题列表
  3. 背景图像设置在HTML标记下，但无法滚动查看完整图像
提问者：小点点

背景图像设置在HTML标记下，但无法滚动查看完整图像


我刚开始使用角，但确实练习了超文本标记语言，JS

我已经在全局样式表style.css中的超文本标记语言标签下设置了背景图像，它会以正确的方式出现并填充宽度，但是我无法解决如何滚动的问题图像。

这就是style.css中的内容：

html { 
    background-image: url("app/Images/Background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: absolute;
    margin: 0;
}

我尝试添加overflow:scroll，但这只是在页面的一侧添加了一个滚动条，但不允许我滚动。

我需要添加什么才能获得滚动查看整个背景图像的年龄？


共3个答案

匿名用户

您可以使用自定义高度。。。但你必须使用img标签

高度：1000px；

匿名用户

好的，所以在我之后，虽然我有一些工作，但它是丑陋的！

在html元素上有一个id，我添加了javascript。

function getWidthAndHeight(){
    var screenWidth = document.getElementById("html").offsetWidth;
    var procent = screenWidth/this.width;
    document.getElementById("html").style.height = (procent * this.height) + "px";
}

function getpic(){
    var myImage = new Image(); 
    myImage.name = "app/Images/Background.png";
    myImage.onload = getWidthAndHeight;
    myImage.src = "app/Images/Background.png";
}

window.addEventListener("resize", getpic);
getpic();

我使用的css是

html{
    width:100%;
    background-image: url("app/Images/Background.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    margin: 0;

}

这就是你要找的吗？

匿名用户

正如@elveti所说，背景图像对元素的大小没有影响，您可能只想创建一个图像作为div，然后可以设置任意宽度和高度大小。查看此链接如果您想这样做，它有解决方案：

具有自动高度的100%宽度背景图像

相关问题