使用 CSS 转换背景图像答案

【问题标题】：Transform a background image with CSS使用 CSS 转换背景图像
【发布时间】：2011-06-20 07:14:15
【问题描述】：

我有一个这样定义的 CSS 类：

.MyClass .MyIcon {
  background: url("../Images/my_icon.png") no-repeat scroll 0px 0px transparent !important;  
}

但是图片对于我的需要来说有点太大了。 使用 CSS，有没有办法将此图像从当前的 20 x 20 大小缩小到 16 x 16。因此，仅制作另一张图片不是一种选择。

我一直在搜索不同的网站，但我觉得我错过了一些东西。

感谢您的帮助！ :D

【问题讨论】：

哇... 4 个答案在 3 分钟内。好的！好吧，很高兴知道我不必再用头撞墙了。
请查看我的更新答案，了解如何提供调整大小的背景图片。

标签： html css

【解决方案1】：

目前还不能更改背景图片的大小，只有在支持 css3 的浏览器中才能使用 background-size 属性。

【讨论】：

【解决方案2】：

仅在 CSS 3 中。它称为background-size。

【讨论】：

【解决方案3】：

这里有一篇解释得很好的文章：http://css-tricks.com/how-to-resizeable-background-image/ 虽然它在技术上不是背景图片，但它消除了 javascript 和对 css3 的需求

【讨论】：

【解决方案4】：

这已经被问过并回答过。

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;
}
?>

【讨论】：

【解决方案5】：

这听起来可能不像您要找的东西..

但我曾经使用<img /> 标签并根据需要更改了height 和width 属性。

【讨论】：