Question

我刚开始使用angular，但是确实有使用HTML，JS和CSS的实践。我正在尝试获取背景图像以填充页面的宽度，然后我希望能够滚动以能够看到图像的其余部分。（图像比宽高）。

我已经在全局样式表style.css中的HTML标记下设置了背景图片，它以正确的方式显示并填充了宽度，但是我无法弄清楚如何滚动查看其余部分图片。

这就是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，但这只是在页面的侧面添加了滚动条，但没有让我滚动。

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

Answer 1

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

高度：1000像素;

Answer 2

好吧，等到我有东西要工作后，却很难看！

在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;

}

这是您要寻找的吗？

Answer 3

正如@elveti所说，background-image对元素的大小没有影响，您可能只想将图像创建为div，然后可以设置所需的任何宽度和高度大小。看一下此链接，如果您想通过这种方式找到解决方案，则可以解决该问题：

100% width background image with an 'auto' height

在HTML标签下设置了背景图片，但无法滚动查看完整图片

3 个答案: