Question

我正在创建一个改变背景的按钮，但我有点卡住了。我得到了足够的主要功能，但背景不是全屏。我不知道如何让它回到全屏。

<html <?php echo "STYLE='background: url(".$back.") no-repeat center center fixed; width: 100%;'";?> >

和html中的一些css

html {
    background: url(../pic/back2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic/back2.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic/back2.jpg', sizingMethod='scale')";
}

Answer 1

尝试实现background-size属性。

background-size:100% auto;

Answer 2

使用属性background-size更改背景大小，因此在您的情况下，您将更改HTML属性宽度，而不是背景。

Answer 3

试试这个..

<div id="background">
<img src="<?php echo $yourimage ;?>" class="stretch" alt="" />
</div>

然后添加此css

#background {
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
z-index: -999; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
width:100%;
height:100%;
}

Answer 4

为什么不使用Javascript？

类似的东西：

<html>
<head>
<script>
function background() {
        document.getElementsByTagName('html').url == "http://www.newurl.com/";
        };
</head>
<body>
<button onclick="background()"></button>
</body>
</html>

css可变背景的宽度

4 个答案: