我有一个按钮，它是一个链接，在 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>