我有一个像这样定义的CSS类:
.MyClass .MyIcon {
background: url("../Images/my_icon.png") no-repeat scroll 0px 0px transparent !important;
}
但是图像对我需要的东西来说太大了。有没有办法将此图像从当前大小20 x 20缩小到16 x 16,使用CSS 。因此,制作另一张图片不是一种选择。
我一直在搜索不同的网站,但我觉得我错过了一些东西。
Thx任何帮助! :d
答案 0 :(得分:6)
您暂时无法更改背景图片的大小,只有在支持css3的浏览器中才能使用background-size
属性。
答案 1 :(得分:1)
仅限CSS 3.它被称为background-size。
答案 2 :(得分:0)
这是一篇有很好解释的文章:http://css-tricks.com/how-to-resizeable-background-image/ 虽然它在技术上不是背景图像,但它消除了javascript和css3的需要
答案 3 :(得分:0)
之前已经提出并回答了这个问题。
Set size on background image with CSS?
如果你需要使图像更大, 你必须在一个编辑图像本身 图像编辑器。
如果您使用img标签,则可以更改 大小,但不会给你 如果你需要的话,你想要的结果 图像是其他一些背景 内容(它不会重复 就像你似乎想要的那样)...
话虽这么说,你可以创建一个PHP页面,或类似的东西,以调整大小的尺寸来提供图像。
.yourDivClass{
background:url(/getImage.php?w=16&h=16&image=my_icon.png);
}
<强> getImage.php 强>
<?php
$filename="../images/".$_REQUEST['image'];
smart_resize_imageFile(
$filename,
$_REQUEST['w'],
$_REQUEST['h'],
true,
'browser',
false
);
function smart_resize_imageFile( $file, $width = 0, $height = 0, $proportional = false, $output = 'file', $delete_original = true, $use_linux_commands = false){
if ( $height <= 0 && $width <= 0 ) {
return false;
}
$info = getimagesize($file);
$image = '';
$final_width = 0;
$final_height = 0;
list($width_old, $height_old) = $info;
if ($proportional) {
if ($width == 0) $factor = $height/$height_old;
elseif ($height == 0) $factor = $width/$width_old;
else $factor = min ( $width / $width_old, $height / $height_old);
$final_width = round ($width_old * $factor);
$final_height = round ($height_old * $factor);
}
else {
$final_width = ( $width <= 0 ) ? $width_old : $width;
$final_height = ( $height <= 0 ) ? $height_old : $height;
}
switch ( $info[2] ) {
case IMAGETYPE_GIF:
$image = imagecreatefromgif($file);
break;
case IMAGETYPE_JPEG:
$image = imagecreatefromjpeg($file);
break;
case IMAGETYPE_PNG:
$image = imagecreatefrompng($file);
break;
default:
return false;
}
if ( $info[2] == IMAGETYPE_GIF )
$image_resized = imagecreate( $final_width, $final_height );
else
$image_resized = imagecreatetruecolor( $final_width, $final_height );
if ( ($info[2] == IMAGETYPE_GIF) || ($info[2] == IMAGETYPE_PNG) ) {
$trnprt_indx = imagecolortransparent($image);
// If we have a specific transparent color
if ($trnprt_indx >= 0) {
// Get the original image's transparent color's RGB values
$trnprt_color = imagecolorsforindex($image, $trnprt_indx);
// Allocate the same color in the new image resource
$trnprt_indx = imagecolorallocate($image_resized, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']);
// Completely fill the background of the new image with allocated color.
imagefill($image_resized, 0, 0, $trnprt_indx);
// Set the background color for new image to transparent
imagecolortransparent($image_resized, $trnprt_indx);
}
// Always make a transparent background color for PNGs that don't have one allocated already
elseif ($info[2] == IMAGETYPE_PNG) {
// Turn off transparency blending (temporarily)
imagealphablending($image_resized, false);
// Create a new transparent color for image
$color = imagecolorallocatealpha($image_resized, 0, 0, 0, 127);
// Completely fill the background of the new image with allocated color.
imagefill($image_resized, 0, 0, $color);
// Restore transparency blending
imagesavealpha($image_resized, true);
}
}
imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $final_width, $final_height, $width_old, $height_old);
if ( $delete_original ) {
if ( $use_linux_commands )
exec('rm '.$file);
else
@unlink($file);
}
switch ( strtolower($output) ) {
case 'browser':
$mime = image_type_to_mime_type($info[2]);
header("Content-type: $mime");
$output = NULL;
break;
case 'file':
$output = $file;
break;
case 'return':
return $image_resized;
break;
default:
break;
}
switch ( $info[2] ) {
case IMAGETYPE_GIF:
imagegif($image_resized, $output);
break;
case IMAGETYPE_JPEG:
imagejpeg($image_resized, $output);
break;
case IMAGETYPE_PNG:
imagepng($image_resized, $output);
break;
default:
return false;
}
return true;
}
?>
答案 4 :(得分:0)
这可能听起来不像你在寻找......
但我最终使用<img />
代码并根据需要更改了height
和width
属性。