Question

我有一个按钮，它是一个链接，带有CSS中定义的背景图像。链接是不可见的，没有文本，因为按钮具有所有图形。我的问题是，链接（不是图像，只是不可见的链接）以100％的宽度扩展并填充整个屏幕，除了高度。

完整样式表。不介意一些类和ID，它们用于其他页面！

 body {
background-image: url("background.jpg");
font: 0.9em verdana, sans-serif;
}
#Upload {
    width: 30em;
    margin:auto;
    margin-top:10%;
    padding:0 3em 2em 2em ;
    border:1px solid #bbb;
    color: #333;
    background:white;
    font: 0.9em verdana, sans-serif;
    border-radius:10px;
}
#Upload label{
    float: left;
    width: 7em;
}
#Upload  a:link {
text-decoration:none;
font-size: 15px;
color:grey;
}#Upload  a:hover{
text-decoration:none;
font-size: 15px;
}
#Upload a:visited {
text-decoration:none;
color: black;
font-size: 15px;
}

.image{
background-color: white;
margin:auto;
border: 3px solid #bbb;
border-radius:10px;
}
.container{
width:100%;
}
a {
font-weight: bold;
text-decoration: none;
}
.button_skip{
background-image:url('button_upload.jpg');
background-repeat: no-repeat;
border-radius:10px;
border: 1px solid black;
width:190px;
height: 35px;
text-align: center;
line-height: 35px;
color:black;
margin:auto;
position:relative;
}
.button_home{
background-image:url('button_upload.jpg');
background-repeat: no-repeat;
border-radius:10px;
border: 1px solid black;
width:190px;
height: 35px;
text-align: center;
line-height: 35px;
color:black;
margin:auto;
position:relative;
}
.button_upload{
background-image:url('upload.png');
background-repeat: no-repeat;
width:272px;
height:107px;
border: 3px solid black;
border-radius:20px;
overflow:hidden;
}
.box{
width:272px;
display:BLOCK;
}


HTML (includes some php, it might cause the problem, dunnae)
<!DOCTYPE HTML>
<html>
<head>
<title>derp</title>
    <script src="cookie_image.js" type="text/javascript"></script>
    <script type="text/javascript">
    document.onReady=function(){
    setCookie("cookie_image",
    };
    </script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">   
</head>
<body>
<?php
function getImagesFromDir($path) { 
    $images = array(); 
    if ( $img_dir = @opendir($path) ) { 
        while ( false !== ($img_file = readdir($img_dir)) ) { 
            // checks for gif, jpg, png 
            if ( preg_match("/(\.gif|\.jpg|\.png)$/", $img_file) ) { 
                $images[] = $img_file; 
            } 
        } 
        closedir($img_dir); 
    } 
    return $images; 
} 

function getRandomFromArray($ar) { 
    // Hvis der ikke er vist billeder før er cookien ikke sat, så vi sætter den og returnerer
    if ( ! array_key_exists('cookie_image', $_COOKIE)) {
        $num = array_rand($ar);
        // Husk lige at sætte cookie, ups
        setcookie("cookie_image", $num, time() + 86400);
        return $ar[$num];
    }
    // Hvis cookie er sat har billeder været vist før så vi får ingen fejl
    mt_srand( (double)microtime() * 1000000 ); // php 4.2+ not needed 
    $num = array_rand($ar); 
    $last_image = explode(",", $_COOKIE["cookie_image"]);
    if (is_array($last_image)==false){
        $last_image = array(""); // HER DET ARRAY DER BLIVER GENERATED SOM LAVER EN ERROR HVIS DER IKKE ER NOGET I
    }
    while(sizeof ($last_image)< sizeof ($ar) and in_array($num, $last_image)){
        $num = array_rand($ar);
    } 
    if (sizeof ($last_image)< sizeof ($ar)) {
        array_push($last_image, $num);
    } else {
        $last_image = array();
    }
    setcookie("cookie_image", implode (",", $last_image), time() + 86400);
    //setcookie("cookie_image", "", time()+86400);
    return $ar[$num]; 
} 



///////////////////////////////////////////////////////////////////// 
// This is the only portion of the code you may need to change. 
// Indicate the location of your images  

$root = ''; 
// use if specifying path from root 
//$root = $_SERVER['DOCUMENT_ROOT']; 

$path = 'uploaded_files/'; 

// End of user modified section  
///////////////////////////////////////////////////////////////////// 

// Obtain list of images from directory  
$imgList = getImagesFromDir($root . $path); 
$img = getRandomFromArray($imgList); 
?>
<div class="container">

        <div class="button_upload_box">
<a href="upload.php" target="_self">
<div class="button_upload">
</div>
</a>

<div>
        <center><br><br>
<img style="max-width:600px; max-height:300px; min-width=100px; min-height:10px;" class="image" src="<?php echo $path . $img ?>" alt="Derp">
<br><br><br><br><br><br>
        </center>
        </div>
        <a href="index.php" target="_self">
        <div class="button_skip">
        Skip this image
        </div>
</a>
    </div>
</body>
</html>

Answer 1

显然我提交的前两个不是你想要的，但我认为这就是你要做的事情：

http://jsfiddle.net/Mutmatt/dBPnf/31/

文字在上面：

http://jsfiddle.net/Mutmatt/dBPnf/46/

链接填充整个页面

1 个答案: